我的网站上有一个菜单,当鼠标悬停在我的菜单上的元素上并单击时,我正在使用 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
}
我想知道是否有一种方法可以在单击我的菜单项时使用 css 或 javascript 将所选元素的文本颜色更改为红色,并保持红色直到选择我的另一个元素菜单。
这只需要发生在我的#stickyheader div 中,而不是网站的其余部分...
示例:当我点击“传记”时,传记变成红色,过渡(0.5 秒缓入),“传记”保持红色,直到我点击另一个元素,当我点击“唱片目录”时, discography 变成红色, Biography 返回浅灰色...
我找不到解决方案...
也许是 JS?
这是一个 JSfiddle:http://jsfiddle.net/B5dYv/2/
最佳答案
这是一个 jquery 解决方案:
$('#wrapper').on('click', 'a', function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
和相关的CSS:
.selected
{
color: red !important;
}
关于javascript - 更改文本链接颜色 javascript 或 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19707165/