1

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

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

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

1 回答 1

2

改变：

.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 示例

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

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

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

jsFiddle 示例

于 2013-10-30T13:53:25.370 回答