How to display one div and hide all others

Question

I want to display a div on each button click and also want to hide the other all divs how I can do it.

HTML

        
                      

              相关标签:
       
      

Answer 1

Just start by hiding all other div's, then showing the one you want to be shown.

$​('#w').live('click', function(){
    $('div').hide();
    $('#a').show();
});

Answer 2

Check the demo http://jsfiddle.net/6UcDR/2/ Is this the thing that you want to achieve.

Answer 3

In your JSFiddle, you are using jQuery 1.7.2. If you are using this version in your real app, you should not be using $.live(), but use $.on() instead - the former is deprecated in favour of the latter.

The simplest and cleanest way to solve your problem would be to wrap both your buttons and divs in containers, and use $.index() to associate a button with a div:

<div class="showThese">
    <div id="a" style="display:none">1</div>
    <div id="b" style="display:none">2</div>
    <div id="c" style="display:none">3</div>
    <div id="d" style="display:none" >4</div>
</div>

<div class="buttons">
    <input type="button" value="1" id="w">
    <input type="button" value="2" id="x">
    <input type="button" value="3" id="y">
    <input type="button" value="4" id="z">
</div>

Note that your attributes must be quoted, as in the above HTML.

Then, in JavaScript, you only need to bind one delegated event to the buttons container. I'll use $.on() in this case:

$('div.buttons').on('click', 'input', function() {
    var divs = $('div.showThese').children();

    divs.eq($(this).index()).show().siblings().hide();
});

Here is a demo.

The above method does away with having to use IDs and other attributes, however you will need to be careful if you want other elements in the containers, as $.index() will begin to fail if you do.

Answer 4

Try this jQuery-

$​('#w').click(function(){
$('#a').show()
$('#b,#c,#d').hide()
});

$('#x').click(function(){
$('#b').show();
$('#a,#c,#d').hide()
});

$('#y').click(function(){
$('#c').show();
$('#b,#a,#d').hide()
});

$('#z').click(function(){
$('#d').show();
$('#b,#c,#d').hide()
});

Answer 5

live is deprecated, use on

$​('input').on('click', function(){

    var index = $(this).index();
    $('div').hide().eq(index).show();

});

example from jQuery.com:

function notify() { alert("clicked"); }
$("button").on("click", notify);

Answer 6

If understand you correctly, it should be just setting the display:none for the divs before showing your specific div.

    $('#w').live('click', function(){
        $('div').css('display','none');
        $('#a').css('display','block');

    });

    $('#x').live('click', function(){
         $('div').css('display','none');
        $('#b').css('display','block');
    });

    $('#y').live('click', function(){
         $('div').css('display','none');
        $('#c').css('display','block');
    });

    $('#z').live('click', function(){
         $('div').css('display','none');
        $('#d').css('display','block');
    });

​