2014-08-28 3 views
0

У меня возникли проблемы с выяснением того, как заставить элементы меню динамически изменять другие элементы списка при нажатии.Как динамически загружать элементы Li с другим массивом Javascript li

Например, я хочу Box1:

<nav class="left"> 

       <ul> 
        <li> 
        <a href=""><br>box1</a> 
        </li> 
... 

обновить Ли в классе «topnav»:

<header class="topnav"> 

         <ul> 
          <li><a href="">Item</a></li> 
          <li><a href="">Item2</a></li> 
          <li><a href="">Item3</a></li> 
         </ul> 

        </header> 

поэтому, когда пользователь щелкает пункт меню box1 меню навигации слева класса, то например -/'' ITEM3 обновления элемента списка 'Item'/'' iTEM2 к позволяет сказать "NewItemName"/"NewItemName2"/"NewItemName3"

пример codepen: http://codepen.io/anon/pen/Epiom

Редактировать: Я пытаюсь изменить элементы li (item, item2, item3) новыми, когда вы нажимаете кнопки навигации на боковых панелях. ex, когда вы нажимаете настройки, 3 верхние кнопки (верхние навигационные клавиши) будут меняться на настройки профиля, настройки видео, настройки звука (эти имена составлены, а не в коде)

ответ

0

Проверьте это fiddle, код которого также ниже и скажите мне, если это то, что вы хотите

<body> 
    <header class="topnav"> 
     <ul> 
      <li><a href="">Item</a> 
      </li> 
      <li><a href="">Item2</a> 
      </li> 
      <li><a href="">Item3</a> 
      </li> 
     </ul> 
    </header> 
    <nav class="left"> 
     <ul> 
      <li>box</li> 
      <li>otherbox</li> 
     </ul> 
    </nav> 
    <script> 
     $(function() 
     { 
      $(".left li").click(function() 
      { 
       var box = $(this).html(); 
       $(".topnav li a").each(function(index) 
       { 
        $(this).html("New" + box + "_" + index) 
       }); 

      }); 
     }); 

    </script> 
</body> 

EDIT:

http://codepen.io/zen_coder/pen/beCKf

  1. Этот код использует JQuery
  2. Нажмите на правые боксы и пункт меню изменится
  3. Мне пришлось удалить ссылки href = "", потому что, если href не начинается с '#' и указывает на текущую страницу, нажав на ссылку, вы покидаете страницу!

Если вы только начинаете развитие переднего конца вы можете посмотреть на:

  1. http://www.w3schools.com/
  2. http://jquery.com/
  3. http://jqueryui.com/
  4. http://getbootstrap.com/
+0

почти что я искал, но в чтобы не создавать и использовать наши предварительно определенные переменные. Извините, я только начинаю входить в javascript – worlddev

+0

@ daveyedwards см. Мое редактирование. Скажите мне, если вам нужно что-то еще, или выберите/подтвердите ответ: D – user2346536

+0

Извините, мне было интересно, как мы делаем свои собственные, а не сгенерированные. Мы хотим связать себя с массивом, который я думаю. У нас есть предварительно определенный список, который мы хотим, чтобы все они изменились, когда нажали. – worlddev

Смежные вопросы