jquery - 在 jquery 中隐藏和显示 div

Question

我有一个菜单，当我单击一个选项卡时，我想隐藏查看器中当前显示的任何内容，并显示与我单击的选项卡相对应的内容（对于所有选项卡）。

<div id="main_view">
    <ul>
        <li id="tab_1">tab 1 </li>
        <li id="tab_2">tab 2 </li>
        <li id="tab_3">tab 3 </li>
    </ul>
    <div id="tab_1_content"> </div>
    <div id="tab_2_content"> </div>
    <div id="tab_3_content"> </div>
</div>

但我不想做类似的事情，

//tab, 2 and 3 content starts as hidden:
$('#tab_2_content').hide();
$('#tab_3_content').hide();

$('#tab_2').click(function, () {
    $('#tab_2_content').show();
    $('#tab_1_content').hide();
    $('#tab_3_content').hide();
});

实现这一目标的最有效方法是什么？

Answer 1

我建议：

$('li[id^="tab_"]').click(function(){
    $('div[id^="tab_"]').hide();
    $('#' + this.id + '_content').show();
});

JS 小提琴演示。

或者：

$('li').click(function(){
    $(this).closest('ul').nextAll('div').hide().eq($(this).index()).show();
});

JS 小提琴演示。

参考：

• click().
• eq().
• hide().
• index().
• nextAll().
• closest().
• show().

Answer 2

给你的标签一个类

<div id="tab_1 tab">

然后你可以做 $("li.tab").hide() ，它会隐藏标签类的所有标签。然后：

$($(this).attr("id") + "_content").show();

反正你懂这个意思。只需填写空白即可。