Question

我想创建一个“更改”导航栏。导航栏应该通过单击其中一个导航元素来更改。

代码如下所示：

<ul>
  <li> Type
    <ul>
      <li> <a href=""> one </a></li>
      <li> <a href=""> two </a></li>
    </ul>
  </li>
  <li> Gender </li> // Lets say that this is replaceable

如果我点击“one”，那就是“性别”。当我点击“两个”时，它会改为“blabla”。

我想问一下用jQuery替换导航菜单的最佳方法是什么，我尝试用.html（）func替换HTML，但我不知道在哪里保存替换代码。

意思是，我想知道在DOM上保留所有代码的最佳方法是什么，每次点击时都更改导航栏。

谢谢， ROBI

Answer 1

此解决方案需要jQuery 1.4.3或更高版本。

您的HTML

<ul>
  <li> Type
    <ul id="mymenu">
      <li><a href="#" data-text="Gender"> one </a></li>
      <li><a href="#" data-text="Blabla"> two </a></li>
    </ul>
  </li>
  <li id="target"> Gender </li> 
</ul>

你的JS

$('#mymenu a').click(function(e) { 
         e.preventDefault(); 
         $('#target').text($(this).data('text')); 
});

Answer 2

在您的内部使用class =“Gender”，并在用户点击时更改您使用id =“Gender”的li的可见性状态

显然，你开始时所有的lis都不可见

<ul>
  <li> Type
    <ul id="mymenu">
      <li><a href="#" class="Gender"> one </a></li>
      <li><a href="#" class="Age"> two </a></li>
    </ul>
  </li>
  <li id="Gender" class="dynamic"> Gender </li>
  <li id="Age" class="dynamic"> Gender </li>  
</ul>

你的JS

 $('#mymenu a').click(function(e) { 
         e.preventDefault(); 
         ... [Change visibility accordingly]
     });

使用jQuery的动态导航栏

2 个答案: