在点击链接时显示一个div并隐藏其他人 [英] Show one div and hide others on clicking a link

问题描述

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

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.

链接如下：

Links look like this:

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

Div像这样：

Divs look like this:

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

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

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.

推荐答案

Something along the line of :

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

应该这样做。

PS ：你的div必须放在容器中才能工作。
小提琴。

P.S: your divs have to be in a container for this to work. Fiddle.

这篇关于在点击链接时显示一个div并隐藏其他人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！