javascript - jQuery - 任何时候只显示一个 div

Question

我正在开发一个新菜单，其中有多个隐藏的 div，但我只想一次在页面上显示一个 div。

这是我的代码； http://jsfiddle.net/sXqnD/

HTML 既漂亮又简单；

<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content">Information about 1.</div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
</div>

这是我对 jQuery 的尝试，它似乎运行得不是很好。

$(document).ready(function(){

$('#infocontent').children().hide();

$('#linkwrapper a').click(function(){

    var chosen1 = this.id;

    $('#infocontent').children('div').each(function(i) {
        var i = i+1;
        if( $("#" + this.id).is(":visible") == true ) {
            $("#" + this.id).hide(function(){
                $("#" + chosen1 + "content").show();
            });
            return false;

        } else {
        $("#" + this.id).show();
        return false;
        }
    });
});
});

谁能看出我哪里出了问题或提出更优雅的解决方案？

Answer 1

$('div').filter('#idOfDivToShow').show();
$('div').not('#idOfDivToShow').hide();

$('div') 将找到您网页上的所有 div。 .filter 将在匹配 $('div') 的结果中搜索并匹配具有 id=idOfDivToShow 的元素。 .not 将在匹配 $('div') 的结果中搜索并匹配没有 id=idOfDivToShow 的元素。

最后，如果您只想在特定元素内搜索，比如#infocontent，那么您可以这样写:

$('#infocontent').filter('div').filter('#idOfDivToShow').show();
$('#infocontent').filter('div').not('#idOfDivToShow').hide();