javascript - 根据点击的 隐藏和显示 div

Question

我想出了一种方法来做到这一点，但是，必须有一种更简洁的方法来做到这一点，因为它不是那么具体和更通用。因此，如果我添加另一个链接和 div，它会自动选择关联。

$(".a1").click(function () {
    $(".div1").show("slow");
    $(".div2").hide("slow");
    $(".div3").hide("slow");
    $(".div4").hide("slow");
    return false; // avoid jump to '#'
});

$(".a2").click(function () {
    $(".div1").hide("slow");
    $(".div2").show("slow");
    $(".div3").hide("slow");
    $(".div4").hide("slow");
           return false; // avoid jump to '#'
});

$(".a3").click(function () {
    $(".div1").hide("slow");
    $(".div2").hide("slow");
    $(".div3").show("slow");
    $(".div4").hide("slow");
           return false; // avoid jump to '#'
});

$(".a4").click(function () {
    $(".div1").hide("slow");
    $(".div2").hide("slow");
    $(".div3").hide("slow");
    $(".div4").show("slow");
           return false; // avoid jump to '#'
});

HTML

<a href="#" class="a1">man, whateva</a>
<a href="#" class="a2">man, whateva</a>
<a href="#" class="a3">man, whateva</a>
<a href="#" class="a4">man, whateva</a>



<div class="div1"  id="div1">Health Research panel</div>
<div class="div2" style="display:none;" id="div2">Healthcare Informatics</div>
<div class="div3" style="display:none;" id="div3" >Public Health informatics</div>
<div class="div4" style="display:none;" id="div4" >Capabilites</div>

Answer 1

如果您为所有 a 元素提供相同的类“.link”，并且为所有 div 元素提供相同的类，.content，可以通过.index()判断点击的a，定位到对应的div。

$('.link').on('click', function( e ) {
  e.preventDefault();
  var index = $('.link').index( this );
  $('.content').filter(':visible').hide().end().eq( index ).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">man, whateva</a>
<a href="#" class="link">man, whateva</a>
<a href="#" class="link">man, whateva</a>
<a href="#" class="link">man, whateva</a>



<div class="content"  id="div1">Health Research panel</div>
<div class="content" style="display:none;" id="div2">Healthcare Informatics</div>
<div class="content" style="display:none;" id="div3" >Public Health informatics</div>
<div class="content" style="display:none;" id="div4" >Capabilites</div>