javascript - 如何选择具有 active=true 属性的 anchor ，添加一个类，如果用户选择其他 anchor ，则将该类赋予新 anchor 。

Question

我需要使用 Jquery 将类“Selected”添加到一个 anchor ，捕获它的唯一方法是通过其属性“active=true”。然后，当用户选择其他 anchor 时，新 anchor 将被设置为“active=true”，并且必须是新类“Selected”，而另一个则不是。

思路是选择的anchor一定要区分。 “选定的类可能只是”.selected {color:red;}”。

        When the user selects 1
<span class="paginate_numbers">
    <a active="true" class="paginate_button paginate_number selected">1</a>
    <a class="paginate_button paginate_number">2</a>
    <a class="paginate_button paginate_number">3</a>
    <a class="paginate_button paginate_number">4</a>
    <a class="paginate_button paginate_number">5</a>
</span>

When the user selects 2
<span class="paginate_numbers">
    <a class="paginate_button paginate_number">1</a>
    <a active="true" class="paginate_button paginate_number selected">2</a>
    <a class="paginate_button paginate_number">3</a>
    <a class="paginate_button paginate_number">4</a>
    <a class="paginate_button paginate_number">5</a>
</span>

.selected {color:red;}

Answer 1

没有active这样的属性。而且，您对 Selected 类和 active 属性的使用似乎是多余的，因为一个只表示另一个。

为什么不为 a:focus 创建一个 CSS 规则呢？ anchor ？

a { text-decoration:none; }

/* When an anchor gets the focus, style it. */
a:focus {color:red; background-color:#ff0; }

<span class="paginate_numbers">
    <a href="#" class="paginate_button paginate_number">1</a>
    <a href="#" class="paginate_button paginate_number">2</a>
    <a href="#" class="paginate_button paginate_number">3</a>
    <a href="#" class="paginate_button paginate_number">4</a>
    <a href="#" class="paginate_button paginate_number">5</a>
</span>

但是，如果您必须动态添加/删除类，您可以在不涉及属性的情况下这样做:

// Get all the appropriate links into a set
var $paginationLiks = $(".paginate_numbers a");

// Set up a click event handler for each link
$paginationLiks.on("click", function(){
  $paginationLiks.removeClass("active"); // Remove the class from all links
  $(this).addClass("active");            // Add class to clicked link
});

a { text-decoration:none; }

/* This class is applied to the clicked link */
.active {color:red; background-color:#ff0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="paginate_numbers">
    <a href="#" class="paginate_button paginate_number">1</a>
    <a href="#" class="paginate_button paginate_number">2</a>
    <a href="#" class="paginate_button paginate_number">3</a>
    <a href="#" class="paginate_button paginate_number">4</a>
    <a href="#" class="paginate_button paginate_number">5</a>
</span>