Question

我有3个简单的按钮，3个简单的div。我需要这些div基于按钮点击在彼此之间切换。这很好。

问题：在第一页加载后，最后一个div（示例文本3）可见而不是第一页（示例文本1）。只有第一个div设置为display：block。其余设置为display：none。

javascipt的：

<script type="text/javascript">
$(window).load(function() {
    $(document).ready(function() {
    $('.content-switch').hide().eq($('.buttons a.active').index()).fadeIn("slow");
    });
    $('.buttons a').click(function() {
        $(".content-switch").eq($(this).index()).fadeIn("slow")
        .siblings('.content-switch').fadeOut("fast");
    });
});
</script>

HTML：

<body>
 <div class="buttons">
  <a href="#" id="button1">Button 1</a>
  <a href="#" id="button2">Button 2</a>
  <a href="#" id="button2">Button 3</a>
 </div>

 <div class="buts" id="buts">
  <div style="display: block;position:absolute" class="content-switch" id="but1">
   <p>sample text 1</p>
  </div>
  <div style="display: none;position:absolute" class="content-switch" id="but2">
   <p>sample text 2</p>
  </div>
  <div style="display: none;position:absolute" class="content-switch" id="but2">
   <p>sample text 3</p>
  </div>
 </div>
</body>

Answer 1

变化：

.eq($('.buttons a.active').index())

为：

.eq(0)

所以你有：

$('.content-switch').hide().eq(0).fadeIn("slow");
$('.buttons a').click(function () {
    $(".content-switch").eq($(this).index()).fadeIn("slow")
        .siblings('.content-switch').fadeOut("fast");
});

<强> jsFiddle example

$('.buttons a.active').index()返回-1，因为没有.buttons a.active元素，这就是第三个div显示的原因。

另一种解决方案是在第一个锚上放置一个活动类并使用原始代码：

<a href="#" id="button1" class="active">Button 1</a>

<强> jsFiddle example

jquery display：当超过2个div时，块无法正常工作

1 个答案: