各リンクはdivを開く必要があります

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

また、あなたは、.subLinkのdivにid属性を追加し、CSSで:target擬似セレクタを利用してJavaScriptせずに同じ効果を得ることができ、以下のように：

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>

---

更新：jQueryのhover()機能を使用して、いくつかのJavaScriptで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>