javascript 如何显示一个div并隐藏所有其他div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10946927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display one div and hide all others
提问by Muhammad Usman
I want to display a div on each button click and also want to hide the other all divs how I can do it.
我想在每次单击按钮时显示一个 div，还想隐藏其他所有 div，我该怎么做。
HTML
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
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');
});
回答by Bojangles
In your JSFiddle, you are using jQuery 1.7.2. If you are using this version in your real app, you should notbe using $.live(), but use $.on()instead - the former is deprecated in favour of the latter.
在您的 JSFiddle 中，您使用的是 jQuery 1.7.2。如果你在你的真实应用中使用这个版本，你不应该使用$.live()，而是使用$.on()- 前者已被弃用而支持后者。
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 包装在容器中，并使用$.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>
Note that your attributes mustbe quoted, as in the above HTML.
请注意，必须引用您的属性，如上面的 HTML。
Then, in JavaScript, you only need to bind one delegated event to the buttons container. I'll use $.on()in this case:
然后，在 JavaScript 中，您只需要将一个委托事件绑定到按钮容器。我会$.on()在这种情况下使用：
$('div.buttons').on('click', 'input', function() {
var divs = $('div.showThese').children();
divs.eq($(this).index()).show().siblings().hide();
});
Hereis 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.
上面的方法不需要使用 ID 和其他属性，但是如果你想要容器中的其他元素，你需要小心，$.index()如果你这样做会开始失败。
回答by Sindri Guemundsson
Just start by hiding all other div's, then showing the one you want to be shown.
只需先隐藏所有其他 div，然后显示您想要显示的那个。
$?('#w').live('click', function(){
$('div').hide();
$('#a').show();
});
回答by Johan
liveis deprecated, use on
live已弃用，请使用 on
$?('input').on('click', function(){
var index = $(this).index();
$('div').hide().eq(index).show();
});
example from jQuery.com:
来自 jQuery.com 的示例：
function notify() { alert("clicked"); }
$("button").on("click", notify);
回答by user850234
Check the demo http://jsfiddle.net/6UcDR/2/Is this the thing that you want to achieve.
检查演示http://jsfiddle.net/6UcDR/2/这是你想要实现的东西。
回答by Chin
If understand you correctly, it should be just setting the display:none for the divs before showing your specific div.
如果理解正确，则应该在显示特定 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');
});
?
回答by NewUser
Try this jQuery-
试试这个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()
});
回答by Playmaker
Add a class to all the divs u want to show or hide eg:
向您要显示或隐藏的所有 div 添加一个类，例如：
<div id=a class="hide" style="display:none">1</diV>
And then add the following statement to each onclick function
然后将以下语句添加到每个 onclick 函数中
$('.hide').css('display','none'); /* Replace .hide with whatever class name u have chosen*/
To see the answer in action: http://jsfiddle.net/6UcDR/1/
要查看实际答案：http: //jsfiddle.net/6UcDR/1/
