每一個環節應該打開一個div

Question

當我點擊，並在mainPart選擇第一個，我在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

您可以使用索引，通過獲取然後點擊的錨指數選擇與在secondPart同一指數的股利：

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

或者，你可以通過使用CSS :target僞選擇的實現無javascript同樣的效果，增加id屬性的.subLink div的，象下面這樣：

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>

---

更新：

對於hover事件與一些JavaScript，使用jQuery hover()功能：

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>