Question

我想在每个按钮点击时显示一个div，并且想要隐藏其他所有div我是如何做到的。

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.net/6UcDR/

Answer 1

在你的JSFiddle中，你使用的是jQuery 1.7.2。如果您在真实应用中使用此版本，则应不使用$.live()，而是使用$.on()代替 - 前者不赞成使用后者。

解决问题的最简单，最简洁的方法是将您的按钮和div包装在容器中，并使用$.index()将按钮与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>

请注意，您的属性必须引用，如上面的HTML。

然后，在JavaScript中，您只需要将一个委托事件绑定到按钮容器。在这种情况下我会使用$.on()：

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

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

Here是一个演示。

上述方法不需要使用ID和其他属性，但是如果您想要容器中的其他元素，则需要小心，因为如果您这样做，$.index()将开始失败。

Answer 2

首先隐藏所有其他div，然后显示你想要显示的那个。

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

Answer 3

不推荐使用

live，请使用on

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

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

});

来自jQuery.com的例子：

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

Answer 4

如果你理解正确，那么在显示你的特定div之前，应该只为div设置display：none。

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

Answer 5

检查演示http://jsfiddle.net/6UcDR/2/这是您想要实现的目标。

Answer 6

试试这个 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 7

为要显示或隐藏的所有div添加一个类例如：

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

然后将以下语句添加到每个onclick函数

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

要查看有效的答案：http://jsfiddle.net/6UcDR/1/

如何显示一个div并隐藏所有其他div

7 个答案: