jQuery 单击链接时显示一个 div 并隐藏其他 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18055524/
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 one div and hide others on clicking a link
提问by Psyche
I have a list with 37 links and 37 hidden divs with some text. The counter starts with 3 and ends with 40. What I would like to do is to display a div when I click a link and also hide all the other divs.
我有一个包含 37 个链接和 37 个隐藏 div 的列表，其中包含一些文本。计数器以 3 开始，以 40 结束。我想做的是在单击链接时显示一个 div 并隐藏所有其他 div。
Links look like this:
链接如下所示：
<a href="#" rel="week_3">Week 3</a>
<a href="#" rel="week_4">Week 4</a>
Divs look like this:
Div 看起来像这样：
<div id="week_3" style="display: none">[...]</div>
<div id="week_4" style="display: none">[...]</div>
I would like to perform this task using jQuery. What I don't know how to do is make a loop and check if any of those links have been clicked.
我想使用 jQuery 执行此任务。我不知道该怎么做是做一个循环并检查是否已单击这些链接中的任何一个。
回答by Patsy Issa
回答by Abhishek Jain
Try this:
尝试这个：
HTML:
HTML：
<a class="link" href="#" data-rel="content1">Link 3</a>
<a class="link" href="#" data-rel="content2">Link 4</a>
<a class="link" href="#" data-rel="content3">Link 5</a>
<a class="link" href="#" data-rel="content4">Link 6</a>
<a class="link" href="#" data-rel="content5">Link 7</a>
<div class="content-container">
<div id="content3">This is the test content for part 3</div>
<div id="content4">This is the test content for part 4</div>
<div id="content5">This is the test content for part 5</div>
<div id="content6">This is the test content for part 6</div>
<div id="content7">This is the test content for part 7</div>
</div>
CSS:
CSS：
.content-container {
position: relative;
width: 400px;
height: 400px;
}
.content-container div {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Script:
脚本：
$(".link").click(function(e) {
e.preventDefault();
$('.content-container div').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
});
回答by Vipul Vaghasiya
you can check below both jsfiddlefile. it's working fine. do you want like this type?
您可以在这两个jsfiddle文件下方查看。它工作正常。你要喜欢这种类型吗？
http://jsfiddle.net/UpuDU/[ Accordion Type ]
http://jsfiddle.net/UpuDU/[手风琴类型]
http://jsfiddle.net/UpuDU/6/[ Tab Type ]
回答by Deepak Biswal
$( "a" ).each(function( index ) {
var id = $(this).attr('rel');
$('.data').hide();
$('#'+id).show();
});
回答by Nils
Have some common class for all divs say like class='week'. And use following to do the required :
有一些共同的班级供大家div说喜欢class='week'。并使用以下执行所需的操作：
$("a[rel^='week']").on('click', function(){
$("div.week").hide();
var targetDiv = $(this).attr('rel');
$("#"+targetDiv).show();
});
});
回答by Vishal
Do one thing
做一件事
Give your divs a class so that when you click on a links you can hide that particular class and then showing the desired div by click of link
给你的 div 一个类，这样当你点击一个链接时，你可以隐藏那个特定的类，然后通过点击链接显示所需的 div
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
<a href="#" onClick="$('.abc').hide();">
