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

将它与 mouseover 绑定，而不是让每个事件清除除 mouseovered 之外的其他消息。

$("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 回答