Javascript jquery总是彩色链接

你好，我需要做的是，当用户点击链接，它需要改变颜色从黑色到红色，并使彩色的所有时间，直到用户点击另一个链接，然后另一个链接标记为红色，这改变为黑色。我使用jquery+css，但它的工作方式不正确

HTML

---

有什么想法吗？

您缺少一些html来实现此功能

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

$(document).ready(function() {
    $("li a").on('click', function(e) {
        e.preventDefault();
        $("li a").css("background-color", "#000");
        $(this).css("background-color", "#d20e10");
    });
 });

---

如果我理解正确，请尝试使用以下代码：

$(function(){
    $("li a")
        .click(function(){
            $("li a").css('color', 'black');
            $(this).css('color', 'red');
        });
}

---

首先，您需要完成标记。没有锚。 其次，您需要避免锚定默认行为，以防它们指向不同的页面

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

$(document).ready(function() {
    $("li a").on('click', function(e) {
        // Comment off the line below if the anchors are
        // not pointing to a different page
        e.preventDefault();

        // Set all back to black, but the clicked one which becomes red
        $("li a").css("color", "red").not($(this)).css("color", "black");
    });
});

工作示例：

1缺少第一个锚点标记

2您是否使用jQuery库参考

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

如果你需要悬停，那么试试这个

$(document).ready(function () {
    $("li a")
        .hover(function () {
        $(this).css("color", "#d20e10");
        }, function() {
            $(this).css("color", "#000000");
        });
});

---

这并不难。您只需使用jquery的单击即可

HTML:

---

请参阅此处附带的JSFIDLE:

您想要文本或字体文本的背景色吗？代码中没有锚定标记。由于单击链接会触发浏览器加载新页面，因此不能使用“onclick”事件。您需要在菜单项上使用“活动类”，例如在PHP中。@LinkinTED-除非他返回false或在单击事件中使用preventDefault来取消默认行为。我将尝试使用：visited pseudo类，但它仍然无效谢谢，但它不正是我需要的，只有当鼠标悬停在链接上时才可以更改颜色您希望链接在鼠标进入时将颜色更改为红色，然后在鼠标离开时将颜色更改为红色？如果是您想要的悬停，则使用jquery hover而不是单击。瞧！

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

$(document).ready(function () {
    $("li a")
        .click(function () {
        $(this).css("color", "#d20e10");
    });
});

$(document).ready(function () {
    $("li a")
        .hover(function () {
        $(this).css("color", "#d20e10");
        }, function() {
            $(this).css("color", "#000000");
        });
});

<ul>
    <li id ='li1'>1</li>
    <li id='li2'>2</li>
    <li id='li3'>3</li>
</ul>

$(document).ready(function() {
    $("#li1")
        .click(function() {
            $(this).css("background-color", "#d20e10");
            $("#li2").css("background-color", "white");
            $("#li3").css("background-color", "white");
        });

    $("#li2")
        .click(function() {
            $(this).css("background-color", "#d20e10");
            $("#li3").css("background-color", "white");
            $("#li1").css("background-color", "white");
        });

    $("#li3")
        .click(function() {
            $(this).css("background-color", "#d20e10");
            $("#li2").css("background-color", "white");
            $("#li1").css("background-color", "white");
        });
});