2

私はこのHTMLを持っています:

<ul id="nav">
  <li id="menu1">item 1</li>
  <li id="menu2">item 2</li>
  <li id="menu3">item 3</li>
</ul>

<div id="arrow">&nbsp;</div>

リストには CSS 設定がありdisplay: inlineます。アクティブなメニュー項目の下には、アクティブなメニュー項目を指す矢印があります。

矢印のデフォルトの CSS 設定は次のとおりです。

#arrow {
  background: url('./arrow-up.png') no-repeat 10px 0;
}

デフォルトで矢印を下item 1に配置します。

次の jQuery コードを作成しましたが、動作していないようです。リンクをクリックしても何も起こらず、矢印が動かない。

$(document).ready(function(){

  $("#menu1").click(function(){
      $("#arrow").animate({
          background: url('./arrow-up.png') no-repeat 10px 0
      }, 1500 );
  });

  $("#menu2").click(function(){
      $("#arrow").animate({
          background: url('./arrow-up.png') no-repeat 90px 0
      }, 1500 );
  });

  $("#menu3").click(function(){
      $("#arrow").animate({
          background: url('./arrow-up.png') no-repeat 180px 0
      }, 1500 );
  });
});

これを修正するにはどうすればよいですか?

4

1 に答える 1

3

このプラグインを使用する必要があります: http://www.protofunc.com/scripts/jquery/backgroundPosition/

$('#menu1').click(function(){
    $('#arrow')
        .animate({backgroundPosition:'10px 0'});
});
于 2012-04-28T21:17:38.847 に答える