仅显示一个隐藏多个Div - Jquery

I'm making a little app, there's a sidebar menu and a header menu, and I basically want all items in both menus to show/hide content on one "page"/window. So when one button is clicked it shows the appropriate Div and hides all others, etc.

我正在制作一个小应用程序,有侧边栏菜单和标题菜单,我基本上希望两个菜单中的所有项目都在一个“页面”/窗口上显示/隐藏内容。因此,当单击一个按钮时,它会显示相应的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>

Any idea what the best/cleanest way to code that using Jquery? Thanks so much for any help.

知道用Jquery编写代码的最佳/最干净的方法是什么?非常感谢您的帮助。

4 个解决方案

#1

Can use indexing assuming they all stay in 1:1 order in page

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

Will be very helpful to give each common component a common class

为每个通用组件提供一个共同的类非常有用

DEMO

#2

You could use the following jquery accordion method as part of the jquery UI library - https://jqueryui.com/accordion/ - very clean and exactly what you are looking for I believe

您可以使用以下jquery手风琴方法作为jquery UI库的一部分 - https://jqueryui.com/accordion/ - 非常干净,正是您所寻找的我相信

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

The code you would need is

你需要的代码是

    <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
    });
});

#3

Give your links and divs classes. E.g. .showHide for links and .contDiv for divs. Assuming they have the same order:

提供你的链接和div类。例如。 .show隐藏链接和.contDiv为div。假设他们有相同的顺序:

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

jsfiddle DEMO

#4

You're looking for tabs. If you're loading bootstrap on the page you can use this:

你正在寻找标签。如果您在页面上加载bootstrap,可以使用:

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

If you already have jQuery UI (or you are willing to load it) you can use this:

如果您已经有jQuery UI(或者您愿意加载它),您可以使用:

https://jqueryui.com/tabs/

If you don't have either but are willing to pull in a plugin something like this will work:

如果你没有,但愿意插入一个类似的插件将起作用:

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

#1