1 
<li><span class="item-label">1</span><li>
<li><span class="item-label">2</span><li>
<li class="selected"><span class="item-label">3</span><li>
<li><span class="item-label">4</span><li>
<li><span class="item-label">5</span><li>

皆さんこんにちは

li のいずれかが選択されているときに、li の前後に CSS を変更する方法を知りたいです。

たとえば、3 を選択した場合、2 と 4 の CSS を変更する必要があります。

あなたの答えに感謝します。

4

3 に答える 3

0

次のようなことを試すことができます：

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

たとえば、次のようなスタイルを作成します。

#menu .active
{
    background:rgba(0,0,0,0.2);
    font-size:12px;
}

この方法を使用すると、クリックされたliリンクのみclass:activeがスタイルにリンクclass:activeされ、他のリンクから削除されliます。

これが実際のデモです: Change active class .

お役に立てれば ：）

于 2013-04-10T04:28:22.853 に答える
0

n番目の子を使用できます。

元 ：

li:nth-child(3):hover li:nth-child(2), li:nth-child(4) {

赤色;

}

それは純粋な css です。つまり、jquery で選択すると、基本的に同じことができます。

于 2013-04-10T03:26:46.497 に答える
0

CSS を使用すると、.select + li を実行して次のリスト項目を選択できると思いますが、CSS のみで前のリスト項目を選択する優れた方法を知りません。

私は mooTools でこれを達成します...

document.getElement('.select + li').setStyles({ border: '1px solid #000' });

document.getElement('.select !+ li').setStyles({ border: '1px solid #000' });

.select クラスを囲む前後のリスト項目のスタイルを設定します。

于 2013-04-10T03:32:13.277 に答える