1

我想在每个按钮单击时显示一个 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/

4

7 回答 7

3

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

这是一个演示。

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

于 2012-06-08T10:20:03.843 回答
2

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();
});
于 2012-06-08T10:15:33.383 回答
1

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);
于 2012-06-08T10:18:15.277 回答
1

如果理解正确，它应该只是在显示您的特定 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');
    });

​
于 2012-06-08T10:20:09.137 回答
1

检查演示http://jsfiddle.net/6UcDR/2/这是你想要实现的东西。

于 2012-06-08T10:36:10.590 回答
0

试试这个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()
});
于 2012-06-08T10:22:14.543 回答
0

为您想要显示或隐藏的所有 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/

于 2012-06-08T10:22:53.457 回答