jquery - jQueryホバー/クリッククラス

Question

サイトのメニューを作成しています。リンクでホバーとクリックの効果を達成しようとしています。リストの要素のホバーイベントでカラーアニメーションをトリガーし、クラス「アクティブ」を追加します。クリックイベントとホバーイベントがトリガーされた場合、その要素に同じクラスを割り当てたいと思います。問題は、要素がホバーされずに他の要素がクリックされたら、クラスを削除する必要があることです。これはコードです：

<div id="menu">
        <ul>
            <li><a href="#" id="btHome">HOME</a></li>
            <li><a href="#" id="btAbout">NOSOTROS</a></li>
            <li><a href="#" id="btGallery">GALERIA</a></li>
            <li><a href="#" id="btContact">CONTACTO</a></li>
        </ul>
</div>

そしてCSS：

.active{
    color:#0CF;
    background-image:url(../img/select.png);
    background-repeat:no-repeat;
    background-position:right center;
}

jQuery:

$("#menu ul li a").hover(function() {
    $(this).stop().animate({color: "#0CF"}, 250); //I have the jQueryUI plugin
},function() {
    $(this).stop().animate({color: "#FFF"}, 100);
});

$("#menu ul li a").click(function() {
    $(this).toggleClass('active', 150);
});

score 3 · Accepted Answer

ここでチェーンを続行できます。2つの別個のセレクターを用意する必要はありません。

var allLinks = $("#menu ul li a").hover(function() {
    $(this).stop().animate({color: "#0CF"}, 250);
},function() {
    var $this = $(this);
    if(!$this.hasClass('active')) // if it is not the active link
        $this.stop().animate({color: "#FFF"}, 100);
}).click(function() {
    allLinks.removeClass('active');
    $(this).toggleClass('active', 150); // may need to adjust the timing here for better UX
});

クリックハンドラーで、最初にアクティブなクラスを削除することに注意してください。

score 0 · Accepted Answer

$("#menu ul li a").hover(function() {
    $("#menu ul li a").removeClass('active');
    $(this).addClass('active');
    $(this).stop().animate({color: "#0CF"}, 250); //I have the jQueryUI plugin
},function() {
    $(this).stop().animate({color: "#FFF"}, 100);
});

$("#menu ul li a").click(function() {
    $("#menu ul li a").removeClass('active');
    $(this).addClass('active');
});

active最初に、接続されている可能性のあるすべてのリンクからクラスを削除してから、現在のリンクに設定します。

score 0 · Accepted Answer

「:active」と「:hover」を使用して、CSS3 を介してホバーとクリックの効果を追加することを実際に提案します。

いくつかのjQueryについては：

$('#menu li a').click(function() {
    $('#menu li a').not(this).removeClass('active');
    $(this).addClass('active');
});

そして例 - http://jsfiddle.net/claycauley/AzXgX/

score 0 · Accepted Answer

0

css3 トランジションを使用したものを次に示します。

http://jsfiddle.net/wrtyM/2/

于 2012-09-10T18:35:57.230 に答える

jquery - jQueryホバー/クリッククラス

4 に答える 4

Related

Reference