如何隱藏當前div並在點擊按鈕時顯示新的div

Question

我有左側欄上的鏈接和右側欄中的相應內容，排列在適當的div中。

我想在單擊左側鏈接時顯示一個div。任何人都可以幫助我做這件事嗎？

的HTML是這樣的：

<div id="sidebar2"> 
     <div id="companyimage"><img src="siteimages/imagetest.jpg"></div> 
     <div id="historyimage"><img src="siteimages/imagetest2.jpg"></div> 
     <div id="awardsimage"><img src="siteimages/imagetest3.jpg"></div> 
     <div id="publications"><img src="siteimages/imagetest4.jpg"></div> 
     <div id="portfolio"> Embedded a Issu pdf here . </div> 
</div> 

的鏈接出現在側邊欄1

我用jQuery的，並能夠隱藏一個並顯示任何其他一個。但是如果點擊隨機鏈接，我不知道該怎麼做。我需要隱藏當前div並顯示相應的div。

我使用的腳本是：

<script> 
    $(document).ready(function(){ 
    $("#showpublications").click(function(){ 
    $("#companyimage").hide(); 
    $("#publications").fadeIn(1500); 
    }); 
}); 
</script> 

任何形式的幫助將不勝感激！

Answer 1

我爲你工作。這是非常基本的，可能需要一些調整，但應該讓你走。

http://jsfiddle.net/bRFgV/

的jQuery：

$("#sidebar2 div").hide(); 

$("#sidebar1 a").click(function(){ 
    //First hide all the DIVs 
    $("#sidebar2 div").hide(); 

    //Then show the selected one. 
    var divtoshow = $(this).attr("href"); 
    $(divtoshow).show(); 
}); 

HTML：

<div id="sidebar1"> 
<a href="#companyimage">companyimage</a> 
<a href="#historyimage">historyimage</a> 
<a href="#awardsimage">awardsimage</a> 
<a href="#publications">publications</a> 
<a href="#portfolio">portfolio</a> 
</div> 
<div id="sidebar2"> 
    <div id="companyimage">companyimage</div> 
    <div id="historyimage">historyimage</div> 
    <div id="awardsimage">awardsimage</div> 
    <div id="publications">publications</div> 
    <div id="portfolio"> Embedded a Issu pdf here . </div> 
</div>