addClass 到当前 li 元素并删除类

addClass to current li element and removeClass

本文关键字：删除 元素 li addClass      更新时间：2023-09-26

我正在尝试将蓝色addClass到单击下一个当前li并removeClass上一个li。但是，我似乎无法让它工作，它将类添加到另一个 li 中，但似乎删除了以前的类。

小提琴：https://jsfiddle.net/5otouLxg/1/

var $li = $("li a#t1:first-child");
var $li2 = $("li a#t2:first-child");
$('li').click(function () {
    if ($li.children().has


var $li = $("li a#t1:first-child");
var $li2 = $("li a#t2:first-child");
$('li').click(function () {
    if ($li.children().hasClass('nav-1')) {
        $li.children().addClass('blue');
        $li2.children().removeClass('blue');
    }
    if ($li2.children().hasClass('nav-2')) {
        $li.children().removeClass('blue');
        $li2.children().addClass('blue');
    }
});
.blue {
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<li>
    <a id="t1">
        <span class="nav-1">HELLO</span>
    </a>
</li>
<li>
    <a id="t2">
        <span class="nav-2">HELLO</span>
    </a>
</li>

我认为您可以通过简化代码来实现您想要的： 适用于 两个 li 或 一堆 li

$('li').click(function () {
    $(this).children('a').addClass('blue');
    $(this).siblings().children('a').removeClass('blue');
});

我使用了另一个脚本来使其工作

$('li').click(function(){
    $('li').removeClass('blue');
    $(this).addClass('blue');
});

该脚本将删除所有 li 的所有"蓝色"类（如果超过 2 个），并将该类添加到已单击的类中。

希望这是你需要的。

小提琴演示

相关文章：