javascript - How to display one div and hide all others - Stack Overflow

admin管理员组

文章数量:1287989

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

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

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

jQuery

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

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

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

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

​ /

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

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

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

jQuery

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

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

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

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

​ http://jsfiddle/6UcDR/

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 14, 2020 at 15:17 Penny Liu 17.5k55 gold badges8686 silver badges108108 bronze badges asked Jun 8, 2012 at 10:12 Muhammad UsmanMuhammad Usman 10.9k2222 gold badges7575 silver badges109109 bronze badges 2

• 1 Just so you know, all attributes must have quotes. id="a" as oppposed to id=a. (id must start with a letter) – Scott Stevens Commented Jun 8, 2012 at 10:16
• I am not sure about JQuery, but I am using dojo and there must be similar way to do this in JQuery. When I am displaying one div, I stores its id in global var. Now I have 2 class for hiding and displaying div. When user presses button, using the value in global var I get the reference of div currently displayed and remove the display class and add hide class. And to display the div, I remove the hide class and add display class. – ejb_guy Commented Jun 8, 2012 at 10:19

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 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.

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

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

​

live is deprecated, use on

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

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

});

example from jQuery.:

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

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

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

Add a class to all the divs u want to show or hide eg:

<div id=a class="hide" style="display:none">1</diV>

And then add the following statement to each onclick function

 $('.hide').css('display','none'); /* Replace .hide with whatever class name u have chosen*/

To see the answer in action: http://jsfiddle/6UcDR/1/

本文标签： javascriptHow to display one div and hide all othersStack Overflow