0

私は自分のウェブサイトにメニューを持っています。メニューの項目にマウスを合わせてクリックするときに CSS を使用しています。

ここに私のメニューがあります：

<div id="stickyheader">
    <a href="#disco">discography</a><span class="grey"> - </span>
    <a href="#bio">biography</a><span class="grey"> - </span>
    <a href="#press">press</a><span class="grey"> - </span>
    <a href="#studio">studio</a><span class="grey"> - </span>
    <a href="#contacts">contacts</a> 
</div>

リンク用のCSS：

a:link, a:visited, a:hover, a:focus, a:active {
    color: #dcdedd;
    text-decoration: none;
    transition: 0.3s ease;
    text-decoration: none;
    -webkit-transition:color 0.5s ease-in;  
    -moz-transition:color 0.5s ease-in;  
    -o-transition:color 0.5s ease-in;  
    transition:color 0.5s ease-in;
}
a:hover{
    color: red
}

メニューの 1 つの項目をクリックしたときに、CSS または JavaScript を使用して、選択した項目のテキストの色を赤に変更し、メニューの別の項目を選択するまで赤を維持する方法があるかどうかを知りたいです。

これは、#stickyheader div でのみ発生する必要があり、ウェブサイトの残りの部分では発生しません...

例：「バイオグラフィー」をクリックすると、トランジション（0.5秒のイーズイン）でバイオグラフィーが赤に変わり、「バイオグラフィー」は別の項目をクリックするまで赤のままになり、「ディスコグラフィー」をクリックするとディスコグラフィーが変わります赤に変わり、伝記はライトグレーに戻ります...

なかなか解決策が見つからない…

多分JS？

ここにJSfiddleがあります：http://jsfiddle.net/B5dYv/2/

4

4 に答える 4

0

多分あなたはこのようなものを試すことができますhttp://jsfiddle.net/JWkZn/

$('#wrapper a').click(function(){
    $('#wrapper a').removeClass('active');
    $(this).addClass('active');
});


a.active { color: red }
于 2013-10-31T13:08:48.307 に答える