一次仅显示一个隐藏多个 Div - Jquery答案

【问题标题】：Show Hide multiple Divs only one at a time - Jquery一次仅显示一个隐藏多个 Div - Jquery
【发布时间】：2015-07-21 08:15:21
【问题描述】：

我正在制作一个小应用程序，有一个侧边栏菜单和一个标题菜单，我基本上希望两个菜单中的所有项目都在一个“页面”/窗口上显示/隐藏内容。因此，当单击一个按钮时，它会显示相应的 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 编写代码的最佳/最干净的方法是什么吗？非常感谢您的帮助。

【问题讨论】：

将div放入容器div并隐藏容器。

标签： javascript jquery css user-interface show-hide

【解决方案1】：

可以使用索引，假设它们都在页面中保持 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();        
});

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

DEMO

【讨论】：

【解决方案2】：

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

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

jsfiddle DEMO

【讨论】：

【解决方案3】：

您可以使用以下 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
    });
});

【讨论】：

Accordion 更多地用于显示基于点击标题的内容列表。我认为 OP 真的在寻找标签：jqueryui.com/tabs

【解决方案4】：

您正在寻找标签。如果你在页面上加载引导程序，你可以使用这个：

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

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

https://jqueryui.com/tabs/

如果你都没有，但愿意引入一个插件，这样的东西会起作用：

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

【讨论】：