在点击链接时显示一个div并隐藏他人

我有一个包含37个链接和37个带有一些文本的隐藏div的列表。计数器以3开始，以40结束。我想要做的是在单击链接时显示div，并隐藏所有其他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这个任务。我不知道该怎么做是做一个循环，并检查是否有任何这些链接已被点击。沿着线

来源

2013-08-05 Psyche

难道是一个格表示在一个时间？或者，如果用户点击三个链接，你是否想要显示相应的3个div，但所有其他链接仍然隐藏？ – lewis

一格一格。用户点击rel =“week_3”的链接，显示id为“week_3”的div。 – Psyche

东西：

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

应该做的伎俩。

P.S：你的div必须放在容器中才能工作。 Fiddle.

来源

2013-08-05 10:12:45

我使用了这个，但是我增加了继承以获得额外的安全性，该页面上的其他链接都不会受到影响。在我的例子中，'project-note-box li a' – JGallardo

谢谢！它像魅力一样工作。 – Divyang

做一件事

给你的div类这样，当你点击一个链接，您可以隐藏特定的类，然后通过链接

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

<a href="#" onClick="$('.abc').hide();">

来源

2013-08-05 10:13:46 Vishal

的点击显示所需的div试试这个：

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'); 
});

Fiddle

来源

2013-08-05 10:13:59

$("a").each(function(index) { 
    var id = $(this).attr('rel'); 
    $('.data').hide(); 
    $('#'+id).show(); 
});

来源

2013-08-05 10:15:19 deepakb

刚刚发布类似的东西。这是我如何去做的。这里是我正在处理的小提琴：http：//jsfiddle.net/KNrNj/但上面是现货。 – lewis

对所有div小号一些常见的类说喜欢class='week'。并使用以下方法来完成要求：

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

}）;

来源

2013-08-05 10:20:11 Nils

你可以检查以下两个jsfiddle文件。它工作正常。你想要这种类型吗？

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

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

来源

2013-08-05 10:20:49

矫枉过正的简单显示/隐藏？（真棒回答b/w） –

在点击链接时显示一个div并隐藏他人

回答

相关问题