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

我想在每个按钮上单击显示一个div，并且要隐藏其他所有div，我如何才能做到这一点。如何显示一个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/

来源

2012-06-08 Muhammad Usman

就这么你知道，所有的属性都必须有引号。 'id =“a”'对不起'id = a'。（'id'必须以字母开头） –

我不确定JQuery，但我使用dojo，并且必须有类似的方法才能在JQuery中执行此操作。当我显示一个div时，我将其ID存储在全局变量中。现在我有2类隐藏和显示div。当用户按下按钮时，使用全局var中的值，我得到当前显示的div的引用，并删除显示类并添加隐藏类。为了显示div，我删除了隐藏类并添加了显示类。 –

通过隐藏所有其他div的，则显示你想要显示的一个刚开始。

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

来源

2012-06-08 10:15:33

如果页面上有任何其他div，它们将被不必要地隐藏起来，因为解决方案参考我的回答 – Playmaker

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

来源

2012-06-08 10:18:15 Johan

“live”和你的“on”变体是不一样的。 – VisioN

@VisioN看到我的更新，它可以被替换而不做任何修改 – Johan

嗯，没有什么改变。检查文档中的委派事件方法。 – VisioN

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

解决您的问题。将包装容器中的两个的按钮和申报单，并使用$.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()将开始失败。

来源

2012-06-08 10:20:03 Bojangles

我喜欢这里使用兄弟姐妹。感谢您的解决方案 – Batman

如果正确理解你，应该只是在显示你的特定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-08 10:20:09 Chin

如果页面上有任何其他div，它们将被不必要地隐藏起来，因为解决方案请参阅我的答案 – Playmaker

@Playmaker，您是正确的。我只是给解决方案给定的代码。它可以很容易地扩展到针对特定的div。您的解决方案必须消除该问题。 – Chin

试试这个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-08 10:22:14 NewUser

添加一个类来所有的u要显示或隐藏如的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-08 10:22:53 Playmaker

检查演示http://jsfiddle.net/6UcDR/2/这是你想要达到的目的。

来源

2012-06-08 10:36:10 user850234

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

回答

相关问题