更改文本链接颜色 JavaScript 或 CSS

change text link color javascript or css

本文关键字：JavaScript CSS 颜色 链接 文本      更新时间：2023-09-26

我的网站上有一个菜单，当鼠标悬停在我的菜单上的项目上和单击时，我正在使用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 将所选项目的文本颜色更改为红色，并保持红色，直到选择菜单的另一个项目。

这只需要发生在我的 #stickyheaderdiv中，而不是在网站的其余部分......

示例：当我点击"传记"时，传记变成红色，

过渡（缓入 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做类似的事情：

http://jsfiddle.net/fG5Uy/2/

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 }
相关文章：