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(); 
   

和使用选择器仅选择那些元素。