css - 单击下一个元素时更改颜色

Question

我有一个视频播放列表，愚蠢的是我的代码：

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        });
        $(this).css( "color", "red" );
    });

    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    });
});

我的要求是当我单击下一个元素，即li列表中的下一个元素时，我希望前一个li元素变回我之前给出的原始默认颜色。我如何实现这一目标？

Answer 1

您可以添加一个特定的类，如下所示：

$("#playlist li").on("click", function() {
    $("#videoarea").attr({
        "src": $(this).attr("movieurl"),
        "poster": "",
        "autoplay": "autoplay"
    });
    $("#playlist li.active").removeClass("active");
    $(this).addClass("active");
})

现在，对您的active课程进行风格化：

.active {
    color: red;
}