在點擊鏈接時顯示一個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並隱藏他人

回答

相關問題