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>

首页加载时，页面上会显示CONTENT ONE。现在，当我点击“菜单二”时，我想显示内容二。当我点击CONTENT TWO所有其他内容关闭时，只有内容TWO在页面上等等...

如何使用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();
});

隐藏/显示特定div

2 个答案: