每个链接应打开一个div

Question

When I click and select the first a in the mainPart , I have to select the first subLink div in the secondPart div.. so other subLink classes are not show.. And it should be in that order.. second a.link selected, second sublink selected.... with 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

You could use index for that, by getting the clicked anchor index then select the div with the same index in the secondPart :

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

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

Hope this helps.

 $('.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

Alternatively, you can achieve the same effect without javascript by making use of :target pseudo selector in CSS, adding id attribute to the .subLink divs, like below:

jsFiddle 1

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

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

---

Update:

For the hover event with some javascript, using jQuery hover() function:

jsFiddle 2

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

 .subLink { display: none; } 

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