1

クリックイベントが発生した後にjqueryを使用してli id = ''スプライトの背景を切り替える方法と、別のスプライト画像に切り替える別のnav要素をクリックすると元の状態に戻る方法....変化するCSSだけを使用しています要素にカーソルを合わせたときの背景..正常に機能していますが、クリック後に表示される2番目のスプライト画像は、別のナビゲーション要素をクリックするまで変更されません..

ここにhtmlコードがあります

<ul  id="navlist">
<li id="ico1"><a href="#"></a></li>
<li id="ico2"><a href="#"></a></li>
<li id="ico3"><a href="#"></a></li>
<li id="ico4"><a href="#"></a></li>
<li id="ico5"><a href="#"></a></li>
<li id="ico6"><a href="#"></a></li>
<li id="ico7"><a href="#"></a></li>
<li id="ico8"><a href="#"></a></li>

CSS コード:

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:40px;display:block;}

#ico1{width:73px;height:40px;background:url(../img/sprite.png) no-repeat -96px 0px;transition: 500ms ease-in-out;}

#ico1:hover{width:96px;height:40px;background:url(../img/sprite.png) no-repeat 0px 0px;transition: 500ms ease-in-out;}

....など

例を次に示します: http://jsfiddle.net/facemoi/nvQRf/

4

1 に答える 1

2

すべてのリスト アイテムが継承する共通のクラスがあるとします。

.ico{
   background: url(images/sprite.jpg);
}

各アイテムとホバー/アクティブ状態のクラスを作成します。

.ico1{
   background-position: 0 12px;
}

.ico1:hover{
   background-position: 0 24px;
}

.ico1.active{
   background-position: 0 32px;
}

...

そしてjQueryを使用するとactive、クリック時にのみクラスを切り替えることができます

$('li').click(function(){

  // remove active class for all other list items
  $(this).parents('ul').find('li').not(this).removeClass('active');

  // add active class on this item
  $(this).addClass('active');
});

(デモ)

これは実際にはJavaScript なしで可能ですが、マークアップに非表示のラジオ ボタンを追加し、アイコン ラベルを作成する必要があります。

于 2013-01-26T19:53:57.233 に答える