0

私は非常に多くのオプションを試しましたが、結果はありませんでした。しかし、私はこのコードを持っています

<ul class="left_nav">
    <li class="left_nav1"><a href="#">opt1</a></li><li class="left_nav2">
    <a href="#">opt1</a></li><li class="left_nav3">
    <a href="#">opt1</a></li><li class="left_nav4">
    <a href="#">opt1</a></li><li class="left_nav5">
    <a href="#">opt1</a></li>
</ul>

これらのdivと画像

<div id="news1" class="news">
    <a href="#" target="_blank"><img src="img/news/news1.jpg" width="340" height="255" alt="" title="" /></a>
</div>
<div id="news2" class="news">
    <a href="#" target="_blank"><img src="img/news/news2.jpg" width="340" height="289" alt="" title="" /></a>
</div>
<div id="news3" class="news">
    <a href="#" target="_blank"><img src="img/news/news3.jpg" width="340" height="232" alt="" title="" /></a>
</div>
<div id="news4" class="news">
    <a href="#" target="_blank"><img src="img/news/news4.jpg" width="340" height="250" alt="" title="" /></a>
</div>
<div id="news5" class="news">
    <a href="#" target="_blank"><img src="img/news/news5.jpg" width="340" height="226" alt="" title="" /></a>
</div>

現在class="news"、デフォルトは ですdisplay: none;。このjQueryで

$(function() {
    $("ul.left_nav li").hover( function() {
            index = $("ul.left_nav li").index(this) + 1;
            $('#news' + index).addClass('active');
        }, function() {
            $('#news' + index).removeClass('active');
        }
    );
});

activeとして定義されているクラスを追加することにより、ホバー時にdivが表示されdisplay: block;ます。マウスがメニュー上にあるときに、このクラスを再度削除したいと思い<ul>ます。ただし、マウスがメニューから離れると、最後にホバーしたものがホバーされた<li>ままになり、画像のある div も表示されたままになります。どうすればそれを理解できますか？

ありがとう！</p>

4

3 に答える 3

3

このようなものはどうですか... http://jsfiddle.net/HcjLW/1/

ホバリング div にある種の一意の ID を指定して、それを画像を含む div の ID (またはインデックス) に変換できるようにする必要があります。

クラスの代わりに ID を持つ HTML

    <ul class="left_nav">
        <li id="left_nav1"><a href="#">opt1</a></li>
        ...
    </ul>

JS

    $("ul.left_nav li").hover( function () {
        $('#news'+  $(this).attr('id').replace('left_nav','')).addClass('active');
    }, function () {
        $('#news'+  $(this).attr('id').replace('left_nav','')).removeClass('active');
    });

クリーナー ソリューション

より良いアイデアは、すべての left_nav アイテムに共通のクラスを与え、data-XXXX属性を使用してインデックス ( ) を割り当てることdata-indexです。

http://jsfiddle.net/HcjLW/3/

HTML

<ul class="left_nav">
    <li class="left_nav_item" data-index="1"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="2"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="3"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="4"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="5"><a href="#">opt1</a></li>
</ul>

JS

    $(".left_nav_item").hover( function () {
        $('#news'+  $(this).data('index')).addClass('active');
    }, function () {
        $('#news'+  $(this).data('index')).removeClass('active');
    });
于 2012-05-03T12:36:31.173 に答える
2

それをマウスオーバーでバインドし、各イベントをマウスオーバーされたニュース以外の他のニュースをクリアします。

$("ul.left_nav li").mouseover( function () {

     index = $("ul.left_nav li").index(this)+1;

     $('.news').removeClass('active');

     $('#news'+index).addClass('active');

});
于 2012-05-03T12:36:44.447 に答える
0

ドキュメントの準備完了イベントを含めませんでした:

$(document).ready(function() {
    $("ul.left_nav li").hover( function () {
        index = $("ul.left_nav li").index(this)+1;
        $('#news'+index).addClass('active');
    }, function () {
        $('#news'+index).removeClass('active');
    });
});

これはうまくいきます

于 2012-05-03T12:45:51.057 に答える