如何隐藏当前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>