Question

我发现了一些jQuery来帮助我显示和隐藏div显示。应该发生的是，当点击一个链接时，它会隐藏第一个div并显示第二个链接。我发现了几种方法可以做到这一点，但它打破了整个页面，只显示了页脚，而且每次都没有显示页面上的其他内容。它看起来很奇怪，但我不太了解jQuery来修复它，所以任何帮助都会非常感激！

＆＃13;

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

＆＃13;

.hide {
  display:none;
}

＆＃13;

<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>

＆＃13;

http://www.embroiderywear.com/designshirtsonline1.html 这是测试页面，所以你可以看到它是如何弄乱的（或解决方案，如果它被修复）我使用基础5进行框架工作所以我不确定是否它的某些东西会破坏它或其他东西。

Answer 1

$('div')将选择页面上的所有<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

添加一个普通＆amp;所有感兴趣的div元素的唯一类

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

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

Answer 2

正如@Tushar已经提到的，你需要创建一个包装所有div的Container然后你可以使用你的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，显示另一个，点击

2 个答案: