单击 anchor 标记 addClass 到特定 LI 的 Javascript/Jquery

Question

例如，我想在用户单击 anchor 时将类“active”添加到具有类“list-1”的 LI具有类“link-1”并从其他列表中删除类“active”的标记。同样的情况进一步适用。 任何建议都会非常有帮助。

<br>
<br>
<ul class="list-item">
    <li class="list-0 active">Product One</li>
    <li class="list-1">Product Two</li>
    <li class="list-2">Product Three</li>
    <li class="list-3">Product Four</li>
</ul>`
<br>
<br> `
<div class="pager-list">
    <a href="#" class="link-0">1</a>
    <a href="#" class="link-1">2</a>
    <a href="#" class="link-2">3</a>
    <a href="#" class="link-3">4</a>
</div>

Answer 1

尝试以下操作:

$(".pager-list").find("a").on("click", function(e) {
    e.preventDefault();
    
    var value = $(this).data("value");
    $(".list-item")
        .find(".list-" + value).addClass("active")
        .siblings().removeClass("active");
});

<ul class="list-item">
    <li class="list-1 active">Product One</li>
    <li class="list-2">Product Two</li>
    <li class="list-3">Product Three</li>
    <li class="list-4">Product Four</li>
</ul>
<div class="pager-list">
    <a href="#" data-value="1">1</a>
    <a href="#" data-value="2">2</a>
    <a href="#" data-value="3">3</a>
    <a href="#" data-value="4">4</a>
</div>