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

或者：

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

JS Fiddle demo

参考文献：

Answer 2

为您的标签提供课程

<div id="tab_1 tab">

然后你可以做$（“li.tab”）。hide（），它会隐藏tab选项卡的所有标签。然后：

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

嗯，你明白了。只需填写空白。

在jquery中隐藏和显示div

2 个答案: