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

我建议在点击功能中简化它，简单地隐藏所有内容，然后显示您想要的内容

$('#linkwrapper a').click(function(){
     $('#infocontent').children('div').each(function(i) { this.hide(); });
     $('#' + this.id + 'content').show();
});

Answer 3

这是一个与您的答案很接近的答案。
正是基于这样的思想：
- 查找div并仅显示指定的div（如果它是隐藏的）
- 隐藏所有其他div

$(document).ready(function () {

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

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

                var chosen1 = this.id;
                var divIdToShow = chosen1 + 'content';

                $('#infocontent').children('div').each(function (i) {
                    var currentDiv = $(this);
                    if (this.id == divIdToShow) {
                        if (currentDiv.not(':visible')) {
                            currentDiv.show();
                        }
                    } else {
                        currentDiv.hide();
                    }
                });
            });
        });

Answer 4

$(window).ready(function(){
    /* hide the content divs */
    $('#infocontent div').css('display', 'none');

    /* add click events */
    $('#linkwrapper a').click(function(){
        $('#infocontent div').css('display', 'none');
        $('#'+this.id+'content').css('display', 'block');
    });
});

我还需要花点时间将您的链接 href 属性更改为“javascript:void(null);”如果链接位于页面“折叠”下方，则可以防止页面跳转。

Answer 5

这个怎么样？ http://jsfiddle.net/sXqnD/2/

<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 class="content" id="link1content">Information about 1.</div>
    <div class="content" id="link2content">Information about 2.</div>
    <div class="content" id="link3content">Information about 3.</div>
</div>

JS：

$(document).ready(function(){

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

    $('#linkwrapper a').click(function(){
        var chosen1 = this.id;
        $('.content').hide();
        $('#' + chosen1 + 'content').show();
    });
});

我想你会发现操纵的东西但从长远来看，使用类似格式的 ID 不会很好地使用。

Answer 6

为了最快的改变：

从

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

到

$(document).ready(function () {

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

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

        var chosen1 = this.id;
        $('#infocontent').children().hide();
        $("#" + chosen1 + "content").show();

    });
});

我基本上用 1）隐藏所有子项，然后 2）显示所需的 div 替换了 .each() 函数

Answer 7

我的解决方案在这里：
http://jsfiddle.net/sXqnD/8/

代码：

$(document).ready(function(){

    var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs

    $('#linkwrapper a').click(function(){
        var $contentDiv = $("#" + this.id + "content");

        if($contentDiv.is(":visible")) {
            $contentDiv.hide(); // Hide Div
        } else {            
            $allContentDivs.hide(); // Hide All Divs
            $contentDiv.show(); // Show Div
        }

        return false;        
    });
});

Answer 8

感谢您的所有建议。

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

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

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

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