jquery hide div，顯示另一個，點擊

Question

我發現了一些jQuery來幫助我顯示和隱藏div顯示。應該發生的事情是，當一個鏈接被點擊時，它隱藏了第一個div並顯示第二個鏈接。我發現了幾種方法來做到這一點，但它打破了整個頁面，每次只顯示頁腳和頁面上的其他內容。它看起來很奇怪，但我不知道jQuery來解決它，所以任何援助將不勝感激！

$('a').click(function(e) { 
 
    e.preventDefault(); 
 
    $('div').eq($(this).index()).show(); 
 
    $('div').not($('div').eq($(this).index())).hide(); 
 
});

.hide { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href='#'>link1</a> 
 
<a href='#'>link2</a> 
 
<a href='#'>link3</a> 
 

 
<div> div for link 1</div> 
 
<div class="hide"> div for link 2</div> 
 
<div class="hide"> div for link 3</div>

http://www.embroiderywear.com/designshirtsonline1.html 這裏的測試頁面，所以你可以看到它是如何搞亂（或者，如果它得到固定的解決方案）我使用的基礎5幀的工作，所以我不知道它是否有破壞它或別的東西。

Answer 1

正如@Tushar已經提到的，你需要一個容器，將包裝所有的div，然後你可以用你的Javascript/JQuery的發揮：

HTML：

<a href='#'>link1</a> 
<a href='#'>link2</a> 
<a href='#'>link3</a> 

<div id="divContainer"> 
    <div> div for link 1</div> 
    <div class="hide"> div for link 2</div> 
    <div class="hide"> div for link 3</div> 
</div> 

使用Javascript/jQuery的：

$(document).ready(function(){ 

    $('a').click(function(e) { 
    e.preventDefault(); 
    $('div#divContainer div').hide(); 
    $('div#divContainer div').eq($(this).index()).show(); 
    }); 

}); 

CSS：

.hide { 
    display:none; 
} 

工作演示：http://jsfiddle.net/boq0c76f/

Answer 2

$('div')將選擇頁面上的所有<div>元素。

可以

1. 包裹感興趣的div元素在容器

   <div id="container"> 
       <div> div for link 1</div> 
       <div class="hide"> div for link 2</div> 
       <div class="hide"> div for link 3</div> 
   </div> 
   

   而在JavaScript中，使用

   $('#container div').eq($(this).index()).show() // Show the corr. el 
       .siblings().hide();       // Hide other 
   

2. 上都加一個共同的&唯一的類int的div元素erest

   <div class="myClass"> div for link 1</div> 
   <div class="hide myClass"> div for link 2</div> 
   <div class="hide myClass"> div for link 3</div> 
   

   和在JavaScript

   $('.myClass').eq($(this).index()).show() 
       .siblings().hide(); 
   

和使用選擇器僅選擇那些元素。