[英]Show one div and hide others on clicking a link
I have a list with 37 links and 37 hidden divs with some text. 我有一个包含37个链接的列表和37个带有一些文本的隐藏div。 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. 计数器以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: Divs看起来像这样:
<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. 我想使用jQuery执行此任务。 What I don't know how to do is make a loop and check if any of those links have been clicked. 我不知道该怎么做是做一个循环并检查是否有任何这些链接被点击。
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');
});
you can check below both jsfiddle
file. 你可以在下面查看两个jsfiddle
文件。 it's working fine. 它工作正常。 do you want like this type? 你想要这种类型吗?
http://jsfiddle.net/UpuDU/ [ Accordion Type ] http://jsfiddle.net/UpuDU/ [手风琴式]
http://jsfiddle.net/UpuDU/6/ [ Tab Type ] http://jsfiddle.net/UpuDU/6/ [标签类型]
$( "a" ).each(function( index ) {
var id = $(this).attr('rel');
$('.data').hide();
$('#'+id).show();
});
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();">
Have some common class for all div
s say like class='week'
. 所有div
都有一些共同的课程,比如class='week'
。 And use following to do the required : 并使用以下来执行所需:
$("a[rel^='week']").on('click', function(){
$("div.week").hide();
var targetDiv = $(this).attr('rel');
$("#"+targetDiv).show();
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.