Question

我有这样的导航：

<nav class="subnav">
 <ul>
  <li><a href="a.html">This goes to content A.</a></li>
  <li><a href="a.html">This goes to content B.</a></li>
  <li><a href="a.html">This goes to content C.</a></li>
 </ul>
</nav>

和另一个像这样：

<nav class="subnav">
 <ul>
  <li><a href="1.html">This goes to content 1.</a></li>
  <li><a href="1.html">This goes to content 2.</a></li>
  <li><a href="3.html">This goes to content 3.</a></li>
 </ul>
</nav>

我想要一个使用onclick事件将我的subnav交换到另一个的元素。如果用户单击“字母组”，则应删除第二个并使用第一个。如果用户单击“数字组”，则应删除第一个并显示第二个。

也应该有默认状态。

我该怎么做？

Answer 1

HTML

<nav class="subnav" id="alphabetical">
 <ul>
  <li><a href="a.html">This goes to content A.</a></li>
  <li><a href="a.html">This goes to content B.</a></li>
  <li><a href="a.html">This goes to content C.</a></li>
 </ul>
</nav>

<nav class="subnav" id="numeric" style="display:none;">
 <ul>
  <li><a href="1.html">This goes to content 1.</a></li>
  <li><a href="1.html">This goes to content 2.</a></li>
  <li><a href="3.html">This goes to content 3.</a></li>
 </ul>
</nav>

<input type="button" id="one" value="Show Alphabetical" />
<input type="button" id="two" value="Show Numeric" />

JS：

$(document).ready(function(){
    $("#one").click(function(){
        $("#numeric").hide();
        $("#alphabetical").show();           
    });

    $("#two").click(function(){
        $("#alphabetical").hide();
        $("#numeric").show();           
    });
});

Demo

Answer 2

最简单的方法是将两个唯一的类附加到uls：

<nav class="subnav alphabetical">
 <ul>
  <li><a href="a.html">This goes to content A.</a></li>
  <li><a href="a.html">This goes to content B.</a></li>
  <li><a href="a.html">This goes to content C.</a></li>
 </ul>
</nav>

<nav class="subnav numerical">
 <ul>
  <li><a href="1.html">This goes to content 1.</a></li>
  <li><a href="1.html">This goes to content 2.</a></li>
  <li><a href="3.html">This goes to content 3.</a></li>
 </ul>
</nav>

然后在JS / jQuery中：

$('.subnav').on('click', function(e){
  var $target = $(e.target);
  $target.hide();
  if($target.hasClass('numerical')) {
    $('.alphabetical').show();
  }
  else {
    $('.numerical').show();
  }
});

使用javascript更改nav / div的内容

2 个答案: