[英]change text link color javascript or css
我的网站上有一个菜单,当鼠标悬停在菜单上的项目上并单击时,我正在使用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秒),“传记”保持红色,直到我单击另一个项目,然后单击“唱片”,唱片就变成变成红色,传记传回浅灰色...
我找不到解决方法...
也许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来做到这一点:
$(document).ready(function() {
$('#stickyheader a').on('click', function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
我更新了您的jsfiddle: http : //jsfiddle.net/B5dYv/5/
您可以使用jQuery做类似的事情:
Javascript:
$(document).ready(function(){
$("#stickyheader a").click(function(){
$("#stickyheader a").each(function(i, e){
$(this).removeClass("selected");
});
$(this).addClass("selected");
});
});
CSS:
#stickyheader a.selected
{
color : blue;
}
也许您可以尝试这样的方法http://jsfiddle.net/JWkZn/
$('#wrapper a').click(function(){
$('#wrapper a').removeClass('active');
$(this).addClass('active');
});
a.active { color: red }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.