1

jquery アニメーション ナビゲーション メニューにアクティブな状態を追加する必要がありますが、機能しないようです。アニメーションは完全に機能しますが、アクティブなタブ (Web サイトの現在のページ) でアニメーションを停止し、他のタブなどで作業を続ける必要があります。助けてください
ここに私のコードがあります

html: 

<div id="insideNav">
    <ul id="nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="media.php">Media</a></li>
        <li><a href="overview.php">Overview</a></li>
        <li><a href="mobile.php">Mobile</a></li>
        <li><a href="options.php">Options</a></li>
        <li><a href="order.php">Order</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</div>

CSS:

ul#nav {
    width:1024px;
    margin: 0 auto;
    text-align:center;
    overflow:hidden;    
}
ul#nav li {
    float:left;
    list-style:none;    
}
ul#nav li a {
    display:block;
    width:108px;
    height:76px;
    padding:15px 0 0 0;
    margin:0 10px 0 10px;
    font: italic 16px Georgia,"Times New Roman", serif;
    color:#919090;
    text-decoration:none;
    background: url("../images/dropDown.png") 0 -149px no-repeat;   
}
ul#nav li a:hover {
    background: url("../images/dropDown.png") 0 0 no-repeat;    
    color:#ffffff;
}

JQuery:

$(document).ready(function() {
    $("ul#nav li a").addClass("js");
    $("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      }, 
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 -149px)"}, 200);

      }

    );

});
4

1 に答える 1

0

jQuery not() 関数を使用して、現在のページでアクティブなクラスを追加できます。

$('ul#nav li a').not('.active').hover( ...

等々...

次に、現在のページがメディアであると仮定して、そのためのクラスを追加します。

<li><a href="media.php" class="active">Media</a></li>

ホバー セット CSS を完全に削除するには:

ul#nav li a.active:hover { background-position: 0 -149px; }
于 2012-11-16T19:17:30.833 に答える