나는이 같은 탐색이 자바 스크립트

Question

와 탐색/DIV의 내용을 변경 :

<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> 

내가에 내 subnav을 교환 할 요소를 원하는을 다른 하나는 onclick 이벤트를 사용합니다. 사용자가 알파벳 그룹을 클릭하면 두 번째 알파벳이 제거되고 첫 번째 알파벳이 사용됩니다. 사용자가 숫자 그룹을 클릭하면 첫 번째 그룹을 제거하고 두 번째 그룹을 표시해야합니다.

기본 상태도 있어야합니다.

어떻게하면됩니까?

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에 고유 한 클래스를 연결하는 것입니다 : JS/jQuery를에 그런

<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> 

:

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