javascript jQuery - 任何时候只显示一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7012364/
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 - Show only one div at any time
提问by Sam
I'm working on a new menu, where I have a multiple hidden divs, but I only want to show one div on the page at any one time.
我正在开发一个新菜单，其中有多个隐藏的 div，但我只想在任何时候在页面上显示一个 div。
Here is my code; http://jsfiddle.net/sXqnD/
这是我的代码； http://jsfiddle.net/sXqnD/
HTML is nice and simple;
HTML 很好很简单；
<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>
<div id="infocontent">
<div id="link1content">Information about 1.</div>
<div id="link2content">Information about 2.</div>
<div id="link3content">Information about 3.</div>
</div>
Here is my attempt at jQuery, which doesn't seem to play nicely.
这是我对 jQuery 的尝试，它似乎不太好用。
$(document).ready(function(){
$('#infocontent').children().hide();
$('#linkwrapper a').click(function(){
var chosen1 = this.id;
$('#infocontent').children('div').each(function(i) {
var i = i+1;
if( $("#" + this.id).is(":visible") == true ) {
$("#" + this.id).hide(function(){
$("#" + chosen1 + "content").show();
});
return false;
} else {
$("#" + this.id).show();
return false;
}
});
});
});
Can anyone see where I have gone wrong or suggest a more elegant solution?
谁能看到我哪里出错了或提出了更优雅的解决方案？
采纳答案by Sam
Thanks for all the advice.
感谢所有的建议。
I found this to be the best solution for what I was trying to achieve.
我发现这是我试图实现的最佳解决方案。
HTML
HTML
<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>
<div id="infocontent">
<div id="link1content">Information about 1.</div>
<div id="link2content">Information about 2.</div>
<div id="link3content">Information about 3.</div>
</div>
jQuery
jQuery
$("#infocontent").hide();
$("#infocontent div").hide();
$('#linkwrapper a[id]').click(function(){
var vsubmen = this.id +"content";
if( $("#infocontent").is(":visible") == false ) {
$("#" + vsubmen).show('fast',function() {
$("#infocontent").slideDown();
});
} else if ( $("#" + vsubmen).is(":visible") == false ) {
$("#infocontent").slideUp('slow',function(){
$("#infocontent div").hide();
$("#" + vsubmen).show();
$("#infocontent").slideDown('slow');
});
} else {
$("#infocontent").slideUp('slow',function(){
$("#infocontent div").hide();
});
}
return false;
});
回答by Vivian River
$('div').filter('#idOfDivToShow').show();
$('div').not('#idOfDivToShow').hide();
$('div')will find all divs on your web page. .filterwill search within the results that match $('div')and match elements that have id=idOfDivToShow. .notwill search within the results that match $('div')and match elements that don't have id=idOfDivToShow.
$('div')将在您的网页上找到所有 div。 .filter将在匹配$('div')和匹配具有 id=idOfDivToShow 的元素的结果中进行搜索。 .not将在匹配$('div')和匹配没有 id=idOfDivToShow 的元素的结果中进行搜索。
Finally, if you want to search only within a particular element, say #infocontent, then you could write:
最后，如果您只想在特定元素内搜索，比如 #infocontent，那么您可以这样写：
$('#infocontent').filter('div').filter('#idOfDivToShow').show();
$('#infocontent').filter('div').not('#idOfDivToShow').hide();
回答by drpip
I would suggest simplifying it in the click function to simply hide everything and then show the one you do want
我建议在点击功能中简化它以简单地隐藏所有内容，然后显示您想要的内容
$('#linkwrapper a').click(function(){
$('#infocontent').children('div').each(function(i) { this.hide(); });
$('#' + this.id + 'content').show();
});
回答by Jacco
This is an answer which is close to what you had. It is based on this thought: - find the div's and only show the specified div if it's hidden - hide all other div's
这是一个接近你所拥有的答案。它基于这个想法： - 找到 div 并且只显示指定的 div，如果它是隐藏的 - 隐藏所有其他 div
$(document).ready(function () {
$('#infocontent').children().hide();
$('#linkwrapper a').click(function () {
var chosen1 = this.id;
var divIdToShow = chosen1 + 'content';
$('#infocontent').children('div').each(function (i) {
var currentDiv = $(this);
if (this.id == divIdToShow) {
if (currentDiv.not(':visible')) {
currentDiv.show();
}
} else {
currentDiv.hide();
}
});
});
});
回答by t0nyh0
For the quickest change:
最快的改变：
From
从
$(document).ready(function(){
$('#infocontent').children().hide();
$('#linkwrapper a').click(function(){
var chosen1 = this.id;
$('#infocontent').children('div').each(function(i) {
var i = i+1;
if( $("#" + this.id).is(":visible") == true ) {
$("#" + this.id).hide(function(){
$("#" + chosen1 + "content").show();
});
return false;
} else {
$("#" + this.id).show();
return false;
}
});
});
});
To
到
$(document).ready(function () {
$('#infocontent').children().hide();
$('#linkwrapper a').click(function () {
var chosen1 = this.id;
$('#infocontent').children().hide();
$("#" + chosen1 + "content").show();
});
});
I basically replaced the .each() function with 1) hiding all the children, and then 2) showing the desired div
我基本上将 .each() 函数替换为 1) 隐藏所有子项，然后 2) 显示所需的 div
回答by Erik Márf?ldi
My solution is here: http://jsfiddle.net/sXqnD/8/
我的解决方案在这里：http: //jsfiddle.net/sXqnD/8/
Code:
代码：
$(document).ready(function(){
var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs
$('#linkwrapper a').click(function(){
var $contentDiv = $("#" + this.id + "content");
if($contentDiv.is(":visible")) {
$contentDiv.hide(); // Hide Div
} else {
$allContentDivs.hide(); // Hide All Divs
$contentDiv.show(); // Show Div
}
return false;
});
});
回答by Mitch C
$(window).ready(function(){
/* hide the content divs */
$('#infocontent div').css('display', 'none');
/* add click events */
$('#linkwrapper a').click(function(){
$('#infocontent div').css('display', 'none');
$('#'+this.id+'content').css('display', 'block');
});
});
I would also take a moment to change your link href attributes to "javascript:void(null);" to prevent page jumping if the links are below the "fold" of the page.
我还要花一点时间将您的链接 href 属性更改为“javascript:void(null);” 如果链接位于页面的“折叠”下方，则防止页面跳转。
回答by BishopRook
How about this? http://jsfiddle.net/sXqnD/2/
这个怎么样？ http://jsfiddle.net/sXqnD/2/
<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>
<div id="infocontent">
<div class="content" id="link1content">Information about 1.</div>
<div class="content" id="link2content">Information about 2.</div>
<div class="content" id="link3content">Information about 3.</div>
</div>
JS:
JS：
$(document).ready(function(){
$('#infocontent').children().hide();
$('#linkwrapper a').click(function(){
var chosen1 = this.id;
$('.content').hide();
$('#' + chosen1 + 'content').show();
});
});
I think you'll find manipulating stuff by similarly-formatted IDs will not be very nice to work with in the long run though.
我认为，从长远来看，您会发现通过类似格式的 ID 操作内容不会很好用。
