0

我在左侧边栏中有链接，在右侧边栏中有相应的内容，排列在适当的 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>

任何形式的帮助将不胜感激！

4

1 回答 1

3

我为你解决了这个问题。这是非常基本的，可能需要一些调整，但应该让你上路。

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>
于 2013-07-01T14:36:02.770 回答