Как показать и скрыть раздел?

Question

Я хочу показать div выбранной HTML-ссылки.

Например:

Я нажал на ссылке HTML Категории<div id="categories" ... > будет показавшей и другой сНом-х будет скрывать.

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

ИЛИ

$('#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(); 
}); 

используйте приведенный выше код, чтобы заставить его работать.

Рабочая Fiddle: https://jsfiddle.net/z4bprass/1/

Answer 3

Вы можете использовать css:target, общие братья Селектор ~

:target { 
 
    display: block !important; 
 
} 
 
:target ~ div[id] { 
 
    display: none; 
 
}

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

 

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

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

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