使用 JavaScript 显示/隐藏多个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14136795/
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
Show/hide multiple divs using JavaScript
提问by KooiInc
I would like to show multiple divs by clicking a respective link, which I believe I have already achieved - however, I would also like to create a link class which hides the div too.
我想通过单击相应的链接来显示多个 div，我相信我已经实现了 - 但是，我还想创建一个也隐藏 div 的链接类。
I'm hoping someone can produce an amended version of the following script, so that it programs a link class to hide a div, using targets?
我希望有人可以生成以下脚本的修改版本，以便它编写一个链接类来隐藏 div，使用目标？
Here is the jsFiddle I'm working with: http://jsfiddle.net/XwN2L/1163/
这是我正在使用的 jsFiddle：http: //jsfiddle.net/XwN2L/1163/
HTML:
HTML：
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>?
JavaScript:
JavaScript：
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
Thank you in advance.
先感谢您。
UPDATE:
更新：
http://jsfiddle.net/XwN2L/1180/
http://jsfiddle.net/XwN2L/1180/
This seemed to work, sorry if I wasn't clear enough in the question.
这似乎有效，对不起，如果我对问题不够清楚。
HTML:
HTML：
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
<a class="hide" target="1">Close 1</a>
<a class="hide" target="2">Close 2</a>
<a class="hide" target="3">Close 3</a>
<a class="hide" target="4">Close 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>?
JavaScript:
JavaScript：
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
$('.hide').click(function () {
$('#div' + $(this).attr('target')).hide();
});
Thanks once again for all your help!
再次感谢您的帮助！
回答by bipen
not sure if this is what you want but you can have a look to this fiddle..
不确定这是否是你想要的，但你可以看看这个小提琴..
http://jsfiddle.net/XwN2L/1165/
http://jsfiddle.net/XwN2L/1165/
create a link with class hide..
创建与类的链接hide..
and call the click function
并调用点击函数
$('.hide').click(function () {
$('.targetDiv').hide();
});
回答by Anton
You can do it like this aswell, so you can toggle the option instead of having an extra button to hide all.
您也可以这样做，这样您就可以切换选项而不是使用额外的按钮来隐藏所有内容。
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});?
回答by KooiInc
When the a.showtag would contain a hrefattribtue, the targetattribute you use would trigger opening a new browser-window or -tab. I would advise to use a data attributehere.
当a.show标签包含属性时，您使用href的target属性将触发打开一个新的浏览器窗口或 -tab。我建议在这里使用数据属性。
If you can use css3, consider a css only solution. Not sure what you mean, but this jsfiddlecontains an example where a mousedown action shows a tooltip-like box using the data-attribute for its content.
如果您可以使用 css3，请考虑仅使用 css 的解决方案。不确定您的意思，但此 jsfiddle包含一个示例，其中 mousedown 操作显示使用 data-attribute 作为其内容的类似工具提示的框。
The css in that example:
该示例中的 css：
a.show:active:after{
position:absolute;
color:green;
margin-top:1.0em;
margin-left:-1em;
background: white;
z-index:2;
content: 'Lorem Ipsum 'attr(data-target);
border: 1px solid #999;
padding: 3px;
}
