jquery 隐藏 div，显示另一个，点击

Question

我找到了一些 jQuery 来帮助我显示和隐藏 div 显示。应该发生的是，当单击一个 link 时，它会隐藏第一个 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 这是测试页，因此您可以看到它是如何搞砸的（或者解决方案，如果它得到修复）我正在使用 foundation 5 作为框架工作，所以我不确定它是否正在破坏它或其他东西。

Answer 1

$('div') 将 select 页面上的所有 <div> 元素。

你可以

将感兴趣的 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

在所有 div 个感兴趣的元素上添加一个共同且独特的 class

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

并仅使用 select 或 select 那些元素。

Answer 2

正如@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/

jquery 隐藏 div，显示另一个，点击

jquery hide div, show another, on click

html

jquery

show

hide