3

首先：对不起我的英语

我有一个这样的网页

<div class="item"><div class="details">
<ul>
<li><a href="#">Show div 1</a></li>
<li><a href="#">Show div 2</a></li>
<li><a href="#">Show div 3</a></li>
</ul>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>           </div></div>

重要提示：我有几个名为“项目”的 div。

我有这个 jquery 脚本

$(document).ready(function() {
  $('ul > li > a').each(function(index) {
  $(this).click(function() {
  $('.details > div:eq(' + index + ')').toggle()
  .siblings('.details > div').hide();
  });
  });
});

但是，如果我单击“a”，它会向我显示所有项目的相对“div”。如果我单击第一个元素的第一个“a”，它会向我显示第一个唯一项目的第一个“div”，而不是所有项目。

这是一个测试页面链接文本 （：O 它只适用于第一个 div 上的链接！）

我希望已经清楚了..

谢谢大家

4

2 回答 2

2

如果您能够将类属性添加到 div 和链接。

<div class="item"><div class="details">
<ul>
<li><a href="#" id="div1">Show div 1</a></li>
<li><a href="#" id="div2">Show div 2</a></li>
<li><a href="#" id="div3">Show div 3</a></li>
</ul>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>           </div></div>

然后，您的 jQuery 可以很简单：

$(document).ready(function() {
  $('ul > li > a').click(function(){
          $('#details > div').hide(); // hide all of the divs
          $('div.' + this.id).show(); // then show the one with the same class as the link.id that was clicked
       });
    });
于 2009-11-01T13:26:04.967 回答
2

编辑，哎哟！INDEX 搞砸了，div:eq(' + index + ')一直在寻找第一个项目 div 的第一个、第二个和第三个元素，试试这个：

$(document).ready(function() {
  $('ul > li > a').each(function(index) {
    $(this).click(function() {
        $(this).closest('.item').siblings().find('.details > div').hide();
        $('.item .details div:eq(' + index + ')').toggle();
    });
  });
});

并尝试合并一个更简单的解决方案，比如@Dave Beer's。

于 2009-11-01T12:59:54.130 回答