如何显示和隐藏一个部分？

Question

我想显示所选 HTML link 的 div。

例如：

我点击了 html link 类别将显示 <div id="categories" ... > 而其他 div 将显示隐藏。

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>

如何显示和隐藏一个部分？

How to show and hide a section?

javascript

jquery

show-hide