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

Answer 2

感谢所有的建议。

我发现这是我想要实现的目标的最佳解决方案。

http://jsfiddle.net/sXqnD/15/

超文本标记语言

<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

$("#infocontent").hide();
$("#infocontent div").hide();


    $('#linkwrapper a[id]').click(function(){

    var vsubmen = this.id +"content";  

    if( $("#infocontent").is(":visible") == false ) {
        $("#" + vsubmen).show('fast',function() {
            $("#infocontent").slideDown();
        });
    } else if ( $("#" + vsubmen).is(":visible") == false ) {
    $("#infocontent").slideUp('slow',function(){
        $("#infocontent div").hide();
        $("#" + vsubmen).show();
        $("#infocontent").slideDown('slow');    
        });
    } else {
    $("#infocontent").slideUp('slow',function(){
        $("#infocontent div").hide();
    });
    }
    return false;
});