Question

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

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

$(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 4

这个怎么样？ 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 5

最快的变化：

这

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

    });
});

我基本上将.each（）函数替换为1）隐藏所有子项，然后2）显示所需的div

Answer 6

我的解决方案在这里： 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 7

这是一个接近你所拥有的答案。它基于这个想法： - 找到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 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;
});

jQuery - 随时只显示一个div

8 个答案: