Question

当我点击并选择mainPart中的第一个a时，我必须选择subLink div中的第一个secondPart 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

您可以使用索引，通过获取单击的锚索引，然后在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>

Answer 2

或者，您可以在不使用javascript的情况下通过在CSS中使用:target伪选择器来实现相同的效果，将id属性添加到.subLink div，如下所示：

jsFiddle 1

＆＃13;

.subLink {
  display: none;
}
.subLink:target {
  display: inline-block;
}

＆＃13;

<div class="mainPart">
  <a href="#sub1" title="" class="link selected">first link</a>
  <a href="#sub2" title="" class="link">second link</a>
</div>
<div class="secondPart">
  <div id="sub1" class="subLink">
    <a href="#" title="" class="lmLink">first 1</a>
    <a href="#" title="" class="lmLink">first 2</a>
  </div>
  <div id="sub2" class="subLink">
    <a href="#" title="" class="lmLink">second 1</a>
    <a href="#" title="" class="lmLink">second 2</a>
  </div>
</div>

＆＃13;

<强>更新

对于带有一些javascript的hover事件，使用jQuery hover()函数：

jsFiddle 2

＆＃13;

$('.mainPart a').hover(function() {
  $('.subLink' + $(this).attr('href')).show();
}, function() {
  $('.subLink' + $(this).attr('href')).hide();
})

＆＃13;

.subLink { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="mainPart">
  <a href="#sub1" title="" class="link selected">first link</a>
  <a href="#sub2" title="" class="link">second link</a>
</div>
<div class="secondPart">
  <div id="sub1" class="subLink">
    <a href="#" title="" class="lmLink">first 1</a>
    <a href="#" title="" class="lmLink">first 2</a>
  </div>
  <div id="sub2" class="subLink">
    <a href="#" title="" class="lmLink">second 1</a>
    <a href="#" title="" class="lmLink">second 2</a>
  </div>
</div>

＆＃13;

每个链接都应该打开一个div

2 个答案: