Hide/Show 个特定的 div

Question

我有 2 个 div。一个菜单和一个内容div

<div>
    <ul>
        <li><a>menu One</a></li>
        <li><a>menu Two</a></li>
        <li><a>menu Three</a></li>
    </ul>
</div>
<div>
    <div>Content one</div>
    <div>Content two</div>
    <div>Content three</div>
</div>

在第一个页面加载时，内容 ONE 在页面上。现在，当我单击 "menu Two" 时，我想显示内容二。当我单击内容二时，所有其他内容都关闭，页面上只有内容二，依此类推...

如何使用 jQuery 中的数组来完成此操作？其他方法也可以。

Answer 1

$('li').click(function(){
  $('div > div:eq('+$(this).index()+')').show();
});

//when user clicks on any content is hides all except the current content
$('div > div').click(function(){
$('div > div').hide();
$(this).show();
});

Answer 2

我为你的问题创建了一个 fiddle。 https://jsfiddle.net/ebilgin/n44gtyLd/3/

HTML

<div class="menu">
    <ul>
        <li><a>menu One</a></li>
        <li><a>menu Two</a></li>
        <li><a>menu Three</a></li>
    </ul>
</div>
<div class="content">
    <ul>
        <li>Content one
            <ul>
                <li>Content one one
                    <ul>
                        <li>Content one one one</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Content two
            <ul>
                <li>Content two two
                    <ul>
                        <li>Content two two two</li>
                    </ul>
                </li>
            </ul>
        </li>
          <li>Content three
            <ul>
                <li>Content three three
                    <ul>
                        <li>Content three three three</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.content > ul > li:nth-child(n+2) {
    display: none;
}

JavaScript

var menuItems = $("div:eq(0)").find("li");
var contents = $("div:eq(1)").children("ul").children("li");

menuItems.on('click', function () {

    var index = menuItems.index( $(this) );
    showContent( index, true );

});

contents.on('click', function () {

    var index = contents.index( $(this) );
    showContent( index, true );

});

function showContent( index, allHide ) {

    if ( allHide )
        contents.hide()

    contents.eq( index ).show();

}

Hide/Show 个特定的 div

Hide/Show specific divs

jquery

show-hide