javascript Jquery 如何激活 div 显示/隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8371508/
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
Jquery How to activate div show/hide
提问by Devon
I'm pretty new to Jquery and Javascript and was am working on a project that I am sure has a much simpler way of coming to the same functionality. The following is a simplified version of what I am doing:
我对 Jquery 和 Javascript 还很陌生，并且正在从事一个项目，我确信该项目有更简单的方法来实现相同的功能。以下是我正在做的事情的简化版本：
HTML
HTML
<a class="link1" href="#">Link 1</a>
<a class="link2" href="#">Link 2</a>
<a class="link3" href="#">Link 3</a>
<div id="div1" style="display: hidden;">Content</div>
<div id="div2" style="display: hidden;">Content</div>
<div id="div3" style="display: hidden;">Content</div>
Jquery
查询
$(".link1").click(function(){
$("#div2, #div3").hide();
$("#div1").show();
$(".link2, .link3").removeClass("active");
$(".link1").addClass("active");
});
$(".link2").click(function(){
$("#div1, #div3").hide();
$("#div2").show();
$(".link1, .link3").removeClass("active");
$(".link2").addClass("active");
});
$(".link3").click(function(){
$("#div1, #div2").hide();
$("#div3").show();
$(".link1, .link2").removeClass("active");
$(".link3").addClass("active");
});
So basically each link is immediately hiding both non-corresponding divs, even if they are not necessarily visible and also removes the active class on the other links even if they are not applied (to ensure that they are removed) then shows the corresponding div and adds an active class to the link. I am wondering if there is an easier way to create this functionality without having to hide all other divs and remove all active classes to ensure that nothing but the one I want visible is showing.
所以基本上每个链接都会立即隐藏两个非对应的 div，即使它们不一定可见，也会删除其他链接上的活动类，即使它们没有被应用（以确保它们被删除）然后显示相应的 div 和向链接添加活动类。我想知道是否有一种更简单的方法来创建此功能，而不必隐藏所有其他 div 并删除所有活动类，以确保只显示我想要可见的那个。
Thanks so much for any help you can provide!!
非常感谢您提供的任何帮助！！
回答by Scoobler
You could change your HTML a little to make things easier, for example:
您可以稍微更改 HTML 以简化操作，例如：
<a class="link" href="#" rel="div1">Link 1</a>
<a class="link" href="#" rel="div2">Link 2</a>
<a class="link" href="#" rel="div3">Link 3</a>
<div class="content" id="div1">Content 1</div>
<div class="content" id="div2">Content 2</div>
<div class="content" id="div3">Content 3</div>
And then use a simple function to perform what I think you want:
然后使用一个简单的函数来执行我认为你想要的：
$('.link').click(function(e){
e.preventDefault();
var content = $(this).attr('rel');
$('.active').removeClass('active');
$(this).addClass('active');
$('.content').hide();
$('#'+content).show();
});
See a demo hereThe code is also explained (commented) on the demo
回答by David Hu
If you group your elements like
如果您将元素分组，例如
<div id="links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div id="content">
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
And add the CSS
并添加 CSS
#content div {
display: none;
}
Then you could do
那么你可以做
$('#links').children().click(function() {
// Get the index of the link that was clicked on
var index = $('#links').children().index(this);
// Hide all content except that corresponding to the clicked link
$('#content').children().hide().eq(index).show();
// Remove active class from all links except that which was clicked
$('#links').children().removeClass('active');
$(this).addClass('active');
});
Now you don't need all those different IDs and classes, and less code repetition in your HTML. :)
现在您不需要所有这些不同的 ID 和类，也不需要 HTML 中的代码重复。:)
JSFiddle: http://jsfiddle.net/divad12/mMSGf/2/
JSFiddle：http: //jsfiddle.net/divad12/mMSGf/2/
回答by David Hu
Try below example. please do required changes.
试试下面的例子。请进行必要的更改。
Jquery:
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
Html:
网址：
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
</table>
Fore more examples Please refer link :
更多例子请参考链接：
http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/
http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/
