セクションの表示と非表示を切り替える方法は？

Question

選択したHTMLリンクのdivを表示します。例えば

：

私は<div id="categories" ... >を示したことになるとのdivの他は非表示になります HTMLリンクカテゴリーをクリックしました。

HTML

<div id="col-navigation"> 
     <ul> 
      <li> 
       <a href="#"> Quizzes </a> 
      </li> 
      <li> 
       <a href="#"> Categories </a> 
      </li> 
      <li> 
       <a href="#"> Jump </a> 
      </li> 
     </ul> 
</div> 

<div id="quizzes"> //default showed 
    Quizzes! 
</div> 

<div id="categories" style="display:none"> 
    Categories! 
</div> 

<div id="jump" style="display:none"> 
    Jump! 
</div> 

Answer 1

ことは、これを試してください： -

$('#col-navigation a').click(function(){ 
    $('#quizzes,#categories,#jump').hide(); 
    $('#' + $.trim($(this).text()).toLowerCase()).show(); 
}); 

Fiddle

OR

$('#col-navigation a').click(function(){ 
    $('#quizzes,#categories,#jump').show() 
    .not('#' + $.trim($(this).text()).toLowerCase()).hide(); 
}); 

Fiddle

Answer 2

$("#col-navigation a").click(function(e) { 
    var getText = $(this).text().trim().toLowerCase(); 
    $("#"+getText).toggle().siblings().hide(); 
    e.preventDefault(); 
}); 

上記コードを使用して動作させます。

ワーキングフィドル：https://jsfiddle.net/z4bprass/1/

Answer 3

あなたはcss:targetを使用することができ、一般的な兄弟セレクタ