一次只显示一个隐藏多个 Div - Jquery

Question

我正在制作一个小应用程序，有一个侧边栏菜单和一个 header 菜单，我基本上希望两个菜单中的所有项目都 show/hide 内容在一个 "page"/ window。因此，当单击一个按钮时，它会显示相应的 Div 并隐藏所有其他按钮，等等

<a id="linktodiv1">Show Window 1, hide other windows</a>
<a id="linktodiv2">Show Window 2, hide other windows</a>
<a id="linktodiv3">Show Window 3, hide other windows</a>
<div id="linktodiv4">Show Window 4, hide other windows</div>

<div id="window1">content</div>
<div id="window2">content</div>
<div id="window3">content</div>
<div id="window4">content</div>

知道使用 Jquery 编码的 best/cleanest 方法是什么吗？非常感谢您的帮助。

Answer 1

您可以使用以下 jquery accordion 方法作为 jquery UI 库的一部分 - https://jqueryui.com/accordion/ - 非常干净，完全符合您的要求寻找我相信

http://jsfiddle.net/d6mSA/616/

您需要的代码是

    <div id="accordion"> 
    <h3><a href="#">Show Window 1</a></h3>
    <div>
        <p>Section 1 Content</p>
    </div>
        <h3><a href="#">Show Window 2</a></h3>
    <div>
        <p>Section 2 Content</div>
        <h3><a href="#">Show Window 3</a></h3>
    <div>
        <p>Section 3 Content</p>
    </div>
        <h3><a href="#">Show Window 4</a></h3>
    <div>
        <p>Section 4 Content</p>
    </div>
</div>

JQUERY

$(function () {
    $("#accordion").accordion({
        autoHeight: true
    });
    $("#accordion").accordion({
        collapsible: true
    });
});

Answer 2

您正在寻找标签。如果您在页面上加载 bootstrap，您可以使用此：

http://getbootstrap.com/javascript/#tabs

如果你已经有jQuery UI（或者你愿意加载它）你可以使用这个：

https://jqueryui.com/tabs/

如果您两者都没有，但愿意使用这样的插件，那么可以使用：

http://os.alfajango.com/easytabs/ http://stitchui.com/lightweight-jquery-tab-plugin/

Answer 3

假设它们在页面

中都保持 1:1 顺序，则可以使用索引

var $links = $('[id^=linktodiv]'),// cache elements to variables
    $content = $('[id^=window]');

$links.click(function(){
    // hide all content, show matching index content window
    $content.hide().eq( $links.index(this) ).show();        
});

给每个通用组件一个通用的会很有帮助class

DEMO

Answer 4

提供您的链接和 div 类。例如。 .showHide 用于链接，.contDiv 用于 div。假设他们有相同的顺序：

$('.showHide').on('click', function() {
    $('.contDiv').hide('slow');
    $('.contDiv').eq($(this).index()).show('slow');
});

jsfiddle DEMO

一次只显示一个隐藏多个 Div - Jquery

Show Hide multiple Divs only one at a time - Jquery

javascript

css

jquery

user-interface

show-hide