隐藏/显示特定的div

Question

我有2个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>

加载第一页时，“内容一”在页面上。 现在，当我单击“菜单二”时，我想显示内容二。 当我单击“内容两个”时，所有其他内容关闭，只有“内容两个”在页面上，依此类推...

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

Answer 1

我为您的问题制造了一个小提琴。 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();

}

Answer 2

$('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();
});