2 
<div id="side">
    <h2 class="1">1</h2>
    <h2 class="2">2</h2>
    <ul>
        <li><a class="3"href="">3</a></li>
        <li><a class="4" href="">4</a></li>
    </ul>
</div>

にカーソルを合わせると、コード<a>が表示され<h2>ますか？それで.3表示され.1ますか？

これは私がこれまでに試したことです：

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#side a").hover( 
            function() { 
                $(this).children('.h2').show(); 
            }, 
            function() { 
                $(this).children('h2').hide(); 
            } 
        ); 
    }); 
</script>
4

4 に答える 4

2 
<style>
.1{
    display: none;
}
</style>
<script>
document.querySelector('.3').onmouseover = function(){
    document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
    document.querySelector('.1').style.display = 'none';
};
</script>
<div id="side">
    <h2 class="1">1</h2>
    <h2 class="2">2</h2>
    <ul>
        <li><a class="3" href="">3</a></li>
        <li><a class="4" href="">4</a></li>
    </ul>
</div>

代わりにdocument.querySelector('.3')使用できますdocument.getElementsByClassName('3')[0]

于 2012-05-10T20:29:47.973 に答える
2

これはテストケースの例です。ライブアプリ用に改善する必要があります。

JSFiddleリンク：ここをクリック

$(document).ready(function(){
    $("#side h2").hide();
    $("#side ul li a").mouseover(function() {
        if($(this).hasClass("3")) {
            $("#side h2.1").show();
        } else if($(this).hasClass("4")) {
            $("#side h2.2").show();
        } 
    }).mouseout(function() {
        if($(this).hasClass("3")) {
            $("#side h2.1").hide();
        } else if($(this).hasClass("4")) {
            $("#side h2.2").hide();
        }
    });
})

JSFiddleリンク：ここをクリック

于 2012-05-10T20:40:20.667 に答える
1

あなたは使うつもりですeq()

私の理解が正しければ、ul の最初の項目が必要です。最初のヘッダーを開きます。2 番目のアイテム、2 番目のヘッダーなどを開きます。

eq()セット内のこの要素の位置を識別する指定されたインデックスを取得します。

ここにフィドルがあります

HTML

<div id="side">
    <h2 class="1">1</h2>
    <h2 class="2">2</h2>
    <ul>
        <li><a class="3" href="#">3</a></li>
        <li><a class="4" href="#">4</a></li>
    </ul>
</div>​

jQuery

$(document).ready(function(){
    $('#side a').on('click', function(){
        var index = $('#side a').index(this);
        // alert(index);
        alert($('#side h2').eq(index).html());
    });
});
​

注: eq と :nth-child の違い

EIDT: ホバーを要求すると、これを実行できます。

$(document).ready(function(){
    $('#side a').on('hover', function(){
        var index = $('#side a').index(this);
        // alert(index);
        // alert($('#side h2').eq(index).html());
        $('#side h2').eq(index).toggle();
    });
});
于 2012-05-10T21:06:48.743 に答える
1 
<div id="side">
    <h2 class="one">What Have You Tried?</h2>
    <h2 class="two">2</h2>
    <ul>
        <li><a class="three"href="">3</a></li>
        <li><a class="four" href="">4</a></li>
    </ul>
</div>


<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#side a").hover( 
            function() { 
                $("#side").find('.one').show(); 
            }, 
            function() { 
                $("#side").find('.one').hide(); 
            } 
        ); 
    }); 
</script>

http://jsfiddle.net/VdFxf/1/

于 2012-05-10T20:33:38.203 に答える