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

Question

I'm working on a new menu, where I have a multiple hidden divs, but I only want to show one div on the page at any one time.

Here is my code; http://jsfiddle.net/sXqnD/

HTML is nice and simple;

<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>

Here is my attempt at jQuery, which doesn't seem to play nicely.

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

Can anyone see where I have gone wrong or suggest a more elegant solution?

Answer 1

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

$('div') will find all divs on your web page. .filter will search within the results that match $('div') and match elements that have id=idOfDivToShow. .not will search within the results that match $('div') and match elements that don't have id=idOfDivToShow.

Finally, if you want to search only within a particular element, say #infocontent, then you could write:

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

Answer 2

I would suggest simplifying it in the click function to simply hide everything and then show the one you do want

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

I would also take a moment to change your link href attributes to "javascript:void(null);" to prevent page jumping if the links are below the "fold" of the page.

Answer 4

How about this? 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();
    });
});

I think you'll find manipulating stuff by similarly-formatted IDs will not be very nice to work with in the long run though.

Answer 5

For the quickest change:

From

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

To

$(document).ready(function () {

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

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

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

    });
});

I basically replaced the.each() function with 1) hiding all the children, and then 2) showing the desired div

Answer 6

My solution is here: http://jsfiddle.net/sXqnD/8/

Code:

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

This is an answer which is close to what you had. It is based on this thought: - find the div's and only show the specified div if it's hidden - hide all other div's

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

Thanks for all the advice.

I found this to be the best solution for what I was trying to achieve.

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