6

我有一个包含 37 个链接和 37 个隐藏 div 的列表,其中包含一些文本。计数器以 3 开头,以 40 结尾。我想做的是在单击链接时显示一个 div 并隐藏所有其他 div。

链接如下所示:

<a href="#" rel="week_3">Week 3</a>
<a href="#" rel="week_4">Week 4</a>

div 看起来像这样:

<div id="week_3" style="display: none">[...]</div>
<div id="week_4" style="display: none">[...]</div>

我想使用 jQuery 来执行这个任务。我不知道该怎么做是循环并检查是否已单击任何这些链接。

4

6 回答 6

22

类似的东西:

$('a').on('click', function(){
   var target = $(this).attr('rel');
   $("#"+target).show().siblings("div").hide();
});

应该做的伎俩。

PS:你的 div 必须在一个容器中才能工作。 小提琴。

于 2013-08-05T10:12:45.537 回答
4

尝试这个:

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:

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

脚本:

$(".link").click(function(e) {
    e.preventDefault();
    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

小提琴

于 2013-08-05T10:13:59.823 回答
3

您可以检查以下两个jsfiddle文件。它工作正常。你想喜欢这种类型吗?

http://jsfiddle.net/UpuDU/ [手风琴类型]

http://jsfiddle.net/UpuDU/6/ [标签类型]

于 2013-08-05T10:20:49.573 回答
1
$( "a" ).each(function( index ) {
  var id = $(this).attr('rel');
  $('.data').hide();
  $('#'+id).show();
});
于 2013-08-05T10:15:19.047 回答
0

做一件事

给你的 div 一个类,这样当你点击一个链接时,你可以隐藏那个特定的类,然后通过点击链接显示所需的 div

<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>

<a href="#" onClick="$('.abc').hide();">
于 2013-08-05T10:13:46.840 回答
0

为所有人提供一些通用课程,div例如class='week'。并使用以下来执行所需的操作:

$("a[rel^='week']").on('click', function(){
  $("div.week").hide();
  var targetDiv = $(this).attr('rel');
  $("#"+targetDiv).show();

});

于 2013-08-05T10:20:11.280 回答