Jquery 隐藏/显示特定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>

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

---

如何在jQuery中使用数组实现这一点？任何其他方法都可以。

我为你的问题编了一把小提琴

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

HTML

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

}

---

`‘当我点击内容二时，所有其他内容都关闭，只有内容二在页面上，依此类推。’‘不。看看我和普拉纳夫提供的答案。这就是它的工作原理。你能帮我看一个关于小提琴的演示吗？请：我不太懂jquery。但是当我看到代码运行时，没关系……你能检查所有答案吗？我会编辑我的答案。你能看一下吗？嗨，艾比尔金，我编辑了我的问题：你能再帮我一次吗？你是什么意思？我对你的问题有点了解，请多解释。你的测试很棒，但我的html结构有点不同。您可以在此处看到我的html结构：。现在，我需要为每个第一个LI提供解决方案：内容一、内容二、内容三。在页面加载时，你必须看到LI内容一个，通过点击菜单二，整个LI内容一个必须隐藏，使用可以看到LI内容二个…等等。在您的提琴示例中，一切正常，但脚本也隐藏了嵌套的li…提琴的Thx。这很好，但是如果我单击菜单项，是否可以隐藏其他内容？在一开始，我看到内容一是正确的，但是如果我单击-例如-菜单二->内容一应该隐藏，只有内容二可以看到。。。我的英语不是很好：太棒了！！！谢谢。。。但是，请再帮我一次。我已经创建了一个新的html结构。这是新的。请看一看。。。。

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

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

}