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

这并不困难。您需要的只是使用jquery的click。

<强> 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/

jquery总是彩色链接

5 个答案: