0

左側のサイドバーにリンクがあり、右側のサイドバーに対応するコンテンツがあり、適切な div に配置されています。

左側のリンクをクリックすると、一度に 1 つの 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を使用し、1つを非表示にして他の1つを表示することができました. しかし、ランダムなリンクをクリックした場合、どうすればよいかわかりません。現在の 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 に答える