如何显示和隐藏部分？

Question

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

例如：

我点击了 html 链接Categories <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();
});

小提琴

或者

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

小提琴

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 ，一般的兄弟姐妹选择器~

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