-1

メニューバーナビゲーション

ここにメニューバーを添付しました。私のWebページは完全にスクロールバーのページシフトタイプです（つまり、メニュー項目をクリックするとスクロールできる6ページを含む単一のページ）。メニュー項目をクリックしている間、メニュー項目のハイライトは添付の画像のようになります。現在のページでは、単一のメニュー項目のハイライトを使用していますが、ここでは、4番目のメニューをクリックしてから現在のページをクリックする必要があります。以前のすべてのメニュー項目を含むメニュー項目も強調表示する必要があります。これを続行するにはどうすればよいですか？

4

2 に答える 2

2

このマークアップの仮定：

<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>

このCSS：

.menuitem{border-bottom: 4px solid #888888;}
.menuActive{border-bottom: 4px solid blue;}

このコード：

$('.menuitem').click(function(){
    $('.menuitem').removeClass('menuActive');
    $(this).prevAll().andSelf().addClass('menuActive');
});

このフィドル： http： //jsfiddle.net/vE6yW/

編集：jQueryバージョン1.8および1.9以降に関連します。

jQueryバージョン1.8では、addBack()メソッドが作成され、バージョン1.9ではandSelf()削除されました。jQuery 1.8以降の場合は、以下を使用してください。

$('.menuitem').click(function(){
    $('.menuitem').removeClass('menuActive');
    $(this).prevAll().addBack().addClass('menuActive');
});

このコードでは、効果は同じです。 addBack()また、必要に応じて選択グループに追加される要素を減らすためのセレクターを実装しました。

于 2012-12-21T20:38:43.003 に答える
0

私は刺し傷を取り、これがあなたが望むものに近いと仮定します：http: //jsfiddle.net/cxndW/

効果を出すために塗りつぶしの境界線を使用していますが、背景画像または境界線画像でそれを実行できるはずです。

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>​

CSS（完全に汎用的であることに注意してください。これをより具体的にするには、クラスまたはIDを使用する必要があります）：

ul{
    overflow:hidden;
    margin:1em;
    float:left;
}
li{
    float:left;
    padding:.1em 0;
    border-bottom:solid 5px #ccc; /* base state, grey */
    cursor:pointer;
}
li + li{
    padding-left:1em;
}
ul:hover li,                  /* all list items when the ul is hovered */
ul.active li,                 /* or all list items when the ul is "active" */
ul.active:hover li{           /* an override for below */
    border-bottom-color:#34f; /* become blue */
}
li:hover ~ li,                /* all list items after the hovered list item */
ul li.active ~ li,            /* all list items after the active list item */
ul.active:hover li:hover ~ li{ /* an override for when the list is active and hovered */
    border-bottom:solid 5px #ccc; /* back to grey */
}

デモには、クリックしたときにliクラスをアクティブに設定する（アクティブなliクラスを互いにクリアする）簡単なjQueryもあります。

于 2012-12-21T20:48:13.837 に答える