jquery总是彩色链接

jquery always coloured link

本文关键字：链接 彩色 jquery      更新时间：2023-09-26

您好，当用户点击链接时，我需要将颜色从黑色更改为红色，并一直保持彩色，直到用户点击另一个链接，然后将另一个连接标记为红色，然后将其更改为黑色。我使用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");
        });
});

有什么想法吗？

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

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

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

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

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

这并不难。您只需要使用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/

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

相关文章：