如何显示和隐藏部分？

Question

我想显示所选HTML链接的div。

例如：

我点击了html链接类别，<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

OR

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

Fiddle

Answer 2

@trip

使用上面的代码使其正常工作。

工作小提琴：https://jsfiddle.net/z4bprass/1/

Answer 3

您可以使用css :target，一般兄弟选择器~

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;