javascript - jquery总是彩色链接

Question

美好的一天，我需要这样做，当用户单击链接时，它需要将颜色从黑色更改为红色并一直显示颜色，直到用户单击另一个链接，然后另一个链接标记为红色，然后变为黑色。我使用jquery + css，但它的工作不正确

HTML

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</ul>

JS

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

有任何想法吗？

Answer 1

您缺少一些 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");
    });
 });

Answer 2

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

<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");
    });
});

工作示例：http: //jsfiddle.net/LWagy/

Answer 3

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

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

Answer 4

1) 第一个anchor标签丢失。

2）你在使用jQuery图书馆参考吗？

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

3) mouseenter!==click

4) background-color!==color

最后试试这个

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

JSFiddle1

---

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

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

JSFiddle2

Answer 5

这并不难。您需要做的就是使用clickjquery 。

HTML：

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

JS：

$(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");
        });
});

在此处查看随附的 jsfiddle：http: //jsfiddle.net/Bpywh/