從一個鏈接顯示具有相同ID的兩個div的內容

我有使用jQuery選項卡的網站。我有一個帶有基本描述的邊欄。下面是一張圖片，下面是一張導航到標籤的列表。從一個鏈接顯示具有相同ID的兩個div的內容

我已經這樣做了，如果你點擊一個鏈接，比如說標籤2，那麼側邊欄中的圖像將會改變，以匹配標籤2的內容等等。

這工作正常大約一個月，突然之間我回到了項目，它不再支持調用兩個ID。我知道使用兩個ID是不正確的，但它工作。

想知道是否有人可以擺脫一些光。

<div id="container"> 
    <div id="tabs"> 
     <div class="sidebar"> 
      <p>Basic description</p> 
      <div id="p1"><img src="product1.jpg"/></div> 
      <div id="p1"><img src="product2.jpg"/></div> 
      <div id="p1"><img src="product3.jpg"/></div> 
      <ul> 
       <li><a href="#p1"><h5>Product 1</h5></a></li> 
       <li><a href="#p2"><h5>Product 2</h5></a></li> 
       <li><a href="#p3"><h5>Product 3</h5></a></li> 
      </ul> 
     </div><!--close sidebar--> 

     <div class="content"> 
      <div id="p1"> 
       <p>Product 1 info</p> 
      </div> <!-- close p1 --> 
      <div id="p2"> 
       <p>Product 2 info</p> 
      </div> <!-- close p2 --> 
      <div id="p3"> 
       <p>Product 3 info</p> 
      </div> <!-- close p3 --> 
     </div><!-- close content --> 
    </div><!-- close tabs --> 
</div><!-- close container -->

來源

2014-01-13 user2873893

你不會找到願意幫助你用錯了刻意的標記沒有很好的理由很多人。它可能以某種身份工作，但它肯定會在某個瀏覽器或其他瀏覽器中出現某處。修復您的ID並修改您的代碼以正常工作。 – isherwood

這是正確的方法。你會使用jQueryUI的內置回調函數。

http://jsfiddle.net/isherwood/73B4f

<style> 
.sidebar-img { 
    display: none; 
} 
</style> 

<div id="container"> 
    <div id="tabs"> 
     <div class="sidebar"> 
      <p>Basic description</p> 
      <div class="sidebar-img" style="display: block;">Image 1</div> 
      <div class="sidebar-img">Image 2</div> 
      <div class="sidebar-img">Image 3</div> 

      ... 
     </div><!-- close content --> 
    </div><!-- close tabs --> 
</div><!-- close container --> 

<script> 
$('#tabs').tabs({ 
    activate: function (event, ui) { 
     $('.sidebar-img').hide(); 
     $('.sidebar-img').eq(ui.newTab.index()).show(); 
    } 
}); 
</script>

http://api.jqueryui.com/tabs/#event-activate

來源

2014-01-13 02:01:48 isherwood

從一個鏈接顯示具有相同ID的兩個div的內容

回答

相關問題