1

我在这个网站上的菜单栏遇到了一些问题：http ://www.re-generation.ro/ro/campanii/minerit-aurifer 。现在，第二个li元素处于活动状态。我想要做的是，在菜单中的hover任何其他元素上，当前活动元素的 变为空白，并且在悬停时，它再次变为活动状态。如果您访问该链接，您可以轻松了解我是什么。liclassli

如果您需要任何信息，请询问。

先感谢您！

我的代码：

var lis = document.getElementsByTagName('ul'); 
for (var i=0, len=lis.length; i<len; i++){ 
    lis[i].onmouseover = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = ''; 
        var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]); 
        ul.className = ''; 
    }; 
    lis[i].onmouseout = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = 'active'; 
    }; 
};

编辑：谢谢大家的回答！这真的很有帮助！

4

4 回答 4

2

HTML：

<ul id="menu">
    <li>Item 1</li>
    <li class="current active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>​

JavaScript：

$('#menu li').on('mouseover', function() {
    var li$ = $(this);
    li$.parent('ul').find('li').removeClass('active');
    li$.addClass('active');
})
.on('mouseout', function() {
    var li$ = $(this);
    li$.removeClass('active');
    li$.parent('ul').find('li.current').addClass('active');
});​

演示

于 2012-11-09T20:11:12.963 回答
2

您可能想要做的第一件事是分配两个不同的状态/类：active和current. 一个告诉您应该显示哪一个，另一个实际切换可见性。

$('#menu').on('mouseover', '> li', function(e) {
    # attach hover event to the menu, and check which LI you are hovering
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').removeClass('active');
    }
}).on('mouseout', '> li', function (e) {
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').addClass('active');
    }
});

在这里，您只选择直接后代并更新类，前提是它不是当前活动的列表项。

于 2012-11-09T20:19:03.293 回答
0

我会为此使用 JQuery。像这样的东西：

$('li').hover(function(){
  $('li.active').removeClass('active').addClass('normal');
});

$('li').mouseleave(function(){
  $('li.normal').removeClass('normal').addClass('active');
});
于 2012-11-09T20:19:18.000 回答
0

您缺少的是一种记住默认状态的方法。这是我的答案，还有一个小提琴

HTML：

<ul class="menuWithDefault">
    <li><a href="/one.html">Link One</a></li>
    <li class="active"><a href="/two.html">Link One</a></li>
    <li><a href="/three.html">Link One</a></li>
    <li><a href="/four.html">Link One</a></li>
</ul>

Javascript：

$(".menuWithDefault").each(function() {
    var defaultItem = $(this).find(".active").first();

    $(this).find("li").hover(function() {
        defaultItem.toggleClass('active', false);
        $(this).toggleClass('active', true);
    }, function() {
        $(this).toggleClass('active', false);
        defaultItem.toggleClass('active', true);
    });
});​
​
于 2012-11-09T20:22:45.613 回答