使用jquery更改嵌套內容的div的可見性，onclick

我有一個鏈接列表。點擊其中一個鏈接時，我想更改與其關聯的div的可見性。我的HTML如下所示：使用jquery更改嵌套內容的div的可見性，onclick

<div id="tab"> 
<ul> 
<li id="tab1" class="active"><a href="#">Link 1</a></li> 
<li id="tab2"><a href="#">Link 2</a></li> 
<li id="tab3"><a href="#">Link 3</a></li> 
<li id="tab4"><a href="#">Link 4</a></li> 
</ul> 
</div> 

<div id="content1"><div class="nestedDiv">Content Here</div></div> 
<div id="content2"><div class="nestedDiv">Content Here</div></div> 
<div id="content3"><div class="nestedDiv">Content Here</div></div> 
<div id="content4"><div class="nestedDiv">Content Here</div></div>

我試圖用例子我發現這裏：How do you swap DIVs on mouseover? (jquery?)但它失敗，因爲嵌套的div。

任何想法，我如何得到這個工作的方式，一個給定的div中的所有內容，包括其他divs，單擊時顯示？我還想在第一次打開頁面時將第一個div保持在活動狀態...更改所選li的活動外觀......但我還沒有試圖解決這個問題。

任何輸入表示讚賞。謝謝！

謝謝！

來源

2010-02-18 Peachy

你應該表明你用來嘗試和隱藏/顯示內容的代碼的類=「內容」，因爲它目前還不清楚什麼叫，或者你使用選擇。 – casperOne 2010-02-18 17:54:36

添加每個內容的div

<style type="text/css"> 
.content 
{ 
    display: none; 
} 
</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#tab a").click(function() { 

     //reset 
     $(".content").hide(); 
     $("#tab .active").removeClass("active"); 

     //act 
     $(this).addClass("active") 
     var id = $(this).closest("li").attr("id").replace("tab",""); 
     $("#content" + id).show(); 
    }); 

}); 
</script>

來源

2010-02-18 17:57:23

這很好，非常感謝你！任何提示，如何我可以保持頁面第一次加載時打開第一個內容div？ – Peachy 2010-02-18 18:18:52

哎呀，忘了那個。將其添加到$（document）.ready部分下：var activeId = $（「。active」）。attr（「id」）。replace（「tab」，「」）; $（「＃content」+ activeId）.show（）; – 2010-02-18 18:34:19

是的 - 這就像一個魅力。非常感謝你的幫助。 – Peachy 2010-02-18 18:43:13

使用jquery更改嵌套內容的div的可見性，onclick

回答

相關問題