javascript - 每个链接应该打开一个div

Question

当我单击并选择 mainPart 中的第一个 a 时，我必须选择 secondPart div 中的第一个 subLink div。所以其他 subLink 类不会显示..并且应该按这个顺序..选择第二个 a.link，选择第二个 sublink.... 使用 jquery

<div class="mainPart">
  <a  href="#" title="" class="link selected">first link</a>
  <a  href="#" title="" class="link">second link</a>
</div>
<div class="secondPart">
  <div  class="subLink selected">
    <a  href="#" title="" class="lmLink">....</a>
    <a  href="#" title="" class="lmLink">....</a>
  </div>
  <div  class="subLink">
    <a  href="#" title="" class="lmLink">....</a>
    <a  href="#" title="" class="lmLink">....</a>
  </div>
</div>

Answer 1

您可以使用索引，通过获取单击的 anchor 索引，然后在 secondPart 中选择具有相同索引的 div :

$('.mainPart>a').on('click', function(){
    var index = $(".mainPart>a").index($(this));

    $('.secondPart .subLink').hide().eq(index).show();
})

希望这有帮助。

$('.mainPart>a').on('click', function(){
   var index = $(".mainPart>a").index($(this));
  
   $('.secondPart .subLink').hide().eq(index).show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainPart">
  <a  href="#" title="" class="link selected">first link</a>
  <a  href="#" title="" class="link">second link</a>
</div>
<div class="secondPart">
  <div  class="subLink selected">
    <a  href="#" title="" class="lmLink">1.1...</a>
    <a  href="#" title="" class="lmLink">1.2...</a>
  </div>
  <div  class="subLink">
    <a  href="#" title="" class="lmLink">2.1...</a>
    <a  href="#" title="" class="lmLink">2.2...</a>
  </div>
</div>