1

このウェブサイトのメニューバーに問題があります: http://www.re-generation.ro/ro/campanii/minerit-aurifer . これで、2 番目のli要素がアクティブになります。私がやりたいことは、メニュー内のhover他の要素の上で、現在アクティブな要素が空白になり、ホバーアウトすると再びアクティブになることです。リンクにアクセスすると、何が何であるかを簡単に理解できます。liclassli

情報が必要な場合は、pls にお問い合わせください。

前もって感謝します！

私のコード:

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

おそらく最初にやりたいことは、2 つの異なる状態/クラスを割り当てることです:activeとcurrent. 1 つはどちらを表示するかを示し、もう 1 つは実際に可視性を切り替えます。

$('#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 に答える