javascript - 切换内容链接

Question

我有这段代码:

<a href="#" class="btn">Link1</a>
<a href="#" class="btn">Link2</a>
<a href="#" class="btn">Link3</a>
<div>Content link 1</div>
<div>Content link 2</div>
<div>Content link 3</div>

我希望每个链接都与其 div 匹配(Link1 => 内容链接 1，Link2 => 内容链接 2，等等......)

我写了这个 Javascript

        $('div').hide();

             $(".btn").click(function () {
               $(this).next("div").slideToggle('slow');
           });

但它不起作用。如果有人能帮助我。

Answer 1

$('div').hide();

$(".btn").click(function () {
  var index = $(this).attr("data-index");
  $("div[data-index!='"+index+"']").slideUp('slow', function(){
    $("div[data-index='"+index+"']").delay(400).slideDown();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn" data-index="1">Link1</a>
<a href="#" class="btn" data-index="2">Link2</a>
<a href="#" class="btn" data-index="3">Link3</a>
<div data-index="1">Content link 1</div>
<div data-index="2">Content link 2</div>
<div data-index="3">Content link 3</div>