jquery：我想顯示一個特定的div時，其相應的鏈接被點擊

Question

我是一個jQuery新手。基本上我只想顯示與點擊鏈接對應的div，並隱藏與該鏈接無關的div。

下面是我想要做的一個例子和我正在努力的腳本。這是Wordpress的原因，這就是爲什麼「JQuery」拼寫出來而不是「$」。

jQuery(document).ready(function() { 
 
\t var clickLink = [".link1", ".link1", ".link1"]; 
 
\t var toggleDiv = ["#link1", "#link1", "#link1"]; 
 
\t for (i=0; i < toggleDiv.length; i++) { 
 
\t \t jQuery(toggleDiv[i]).hide(); 
 
\t } 
 
\t jQuery('#linkBank a').click(function() { 
 
      for (i=0; i < clickLink.length; i++) { 
 
      \t \t if (this.id == clickLink[i]) { 
 
      \t \t \t jQuery(toggleDiv[i]).toggle(); 
 
      \t \t } 
 
      } 
 
      
 
      return false; 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="linkBank"> 
 
<a href="#" id="link1">First Link</a> 
 
<a href="#" id="link2">Second Link</a> 
 
<a href="#" id="link3">Third Link</a> 
 
</div> 
 

 
<div class="link1">You clicked on First Link</div> 
 
<div class="link2">You clicked on Second Link</div> 
 
<div class="link3">You clicked on Third Link</div>

Answer 1

你應該使用HTML數據的屬性和使用，才能知道要顯示的元素，這是最乾淨的方式，你不依賴值或ID陣列上值與您希望展示的課程相同。在這個例子中，我命名了'data-show'html屬性，它的值基本上是你希望選擇的元素的選擇符（例如'.sth'用於'sth'類的元素，你可以使用#foo ID爲元素 '富' 等）

jQuery(document).ready(function() { 
 
     var $divs = jQuery('.toggling-divs'); 
 
     $divs.hide(); 
 
\t jQuery('#linkBank a').click(function() { 
 
      $divs.hide(); 
 
      var showDiv = jQuery(this).attr('data-show'); 
 
      jQuery(showDiv).show(); 
 
      
 
      return false; 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="linkBank"> 
 
<a href="#" id="link1" data-show=".first-link">First Link</a> 
 
<a href="#" id="link2" data-show=".sth-else">Second Link</a> 
 
<a href="#" id="link3" data-show=".foobar">Third Link</a> 
 
</div> 
 

 
<div class="first-link toggling-divs">You clicked on First Link</div> 
 
<div class="sth-else toggling-divs">You clicked on Second Link</div> 
 
<div class="foobar toggling-divs">You clicked on Third Link</div>