Javascript-форум - Смена содержимого в div'e

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Смена содержимого в div'e (https://javascript.ru/forum/dom-window/64746-smena-soderzhimogo-v-div%27e.html)

Смена содержимого в div'e

Здравствуйте форумчане) Не подскажите есть такая идея реализовать меню на сайте(в левой колонке) не через отдельные ссылки, а через смену с содержимого в блоке(правая колонка), на сколько вообще это адекватная идея по канонам программирования? Такая идея посетила потому что содержимое в правом блоке по большей части это заголовок + 2-3 абзаца текста.

<div class="demo_container">
    <div id='cssmenu'>
        <ul>
           <li><a href='index.html'><span>Главная</span></a>
           <hr>
           <li class='has-sub' onclick="CH1()"><a href='#'><span>menu1</span></a>
              <ul>
                 <li class='active'><a href='menu1.html'><span>submenu1</span></a></li>
                 <li class='active'><a href='menu2.html'><span>submenu2</span></a></li>                                         
              </ul>           
           <li><a href='menu2.html'><span>menu2</span></a></li>
           <li><a href='menu3.html'><span>menu3</span></a></li>        
        </ul>
    </div>

</div>

пока что все меню построено на доп.ссылках, функцию "onclick=CH1()" я добавил только на menu1, "change1" - ид дива в правой колонке в котором должны происходить замены

function CH1() {
    document.getElementById("Change1").innerHTML = "<h4>Пример заголовка</h4><p>Пример Абзаца 1.</p> <p>Пример абзаца 2</p> <p>Пример Абзаца 3</p>"
   }

Воот... интересует пару вопросов?
1. Правильная ли это форма записи, или может нужно там как-то через createElement('p')+что-то там и тд? честно не знаю, подскажите, пожалуйста
2. Как к этим абзацам и заголовкам добавить картинки
И самый главный вопрос
3. Дело в том что в меню есть 2 сабменю, которые открываются при клике на "menu1", и так получается что функция примененная к "menu1", распространяется и на входящие в нее submenu1-2, т.е. при кликах на них открывается то что и при клике на menu1, но на них нужно повесить другие функции, подскажите как сделать так что бы функция поставленная на menu1 не распространялась на сабменю которые из нее выплывают

Когда уберешь все онклики, появится задача найти клики, решение которой само по себе приведет к правильному ответу.

Цитата:

Сообщение от warren buffet (Сообщение 427467)

не очень понял, можно немного подробней?

Я бы так наверное сделал

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="demo_container">
    <div id='cssmenu'>
        <ul>
           <li><a href='index.html'><span>Главная</span></a>
           <hr>
           <li class='has-sub'><a href='#'><span  data-id='m1'>menu1</span></a>
              <ul>
                 <li class='active'><a href='menu1.html'><span>submenu1</span></a></li>
                 <li class='active'><a href='menu2.html'><span data-id='m2'>submenu2</span></a></li>                                         
              </ul>           
           <li><a href='menu2.html'><span>menu2</span></a></li>
           <li><a href='menu3.html'><span>menu3</span></a></li>        
        </ul>
    </div>
  <div id="data"></div>
<script>
  var data = {
  m1: {
    text: 'Много текста по этому пункту'
  },
  m2: {
    text: 'много текста по другому пункту'
  }
};
var menu = document.getElementById('cssmenu')
var container = document.getElementById('data')
menu.addEventListener('click', function(e){
  e.preventDefault();
  if(e.target.dataset.id){container.innerHTML = data[e.target.dataset.id].text;}
})
  </script>
</div>
</body>
</html>

Цитата:

Сообщение от Царь Леонид (Сообщение 427480)

Я бы так наверное сделал

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="demo_container">
    <div id='cssmenu'>
        <ul>
           <li><a href='index.html'><span>Главная</span></a>
           <hr>
           <li class='has-sub'><a href='#'><span  data-id='m1'>menu1</span></a>
              <ul>
                 <li class='active'><a href='menu1.html'><span>submenu1</span></a></li>
                 <li class='active'><a href='menu2.html'><span data-id='m2'>submenu2</span></a></li>                                         
              </ul>           
           <li><a href='menu2.html'><span>menu2</span></a></li>
           <li><a href='menu3.html'><span>menu3</span></a></li>        
        </ul>
    </div>
  <div id="data"></div>
<script>
  var data = {
  m1: {
    text: 'Много текста по этому пункту'
  },
  m2: {
    text: 'много текста по другому пункту'
  }
};
var menu = document.getElementById('cssmenu')
var container = document.getElementById('data')
menu.addEventListener('click', function(e){
  e.preventDefault();
  if(e.target.dataset.id){container.innerHTML = data[e.target.dataset.id].text;}
})
  </script>
</div>
</body>
</html>

Спасибо большое, а не подскажешь как приминить стили(теги хотя бы) к этому "text" и как добавить картинки, т.е. тег img?

Цитата:

Сообщение от KingRex (Сообщение 427564)

Точно также как ты хотел добавить , например

'<span class="myClass">Мой текст</span>'
'<img src="/mypath.jpg"/>'