如何添加和删除类？

Question

我知道有多个类似的问题，但我无法从中弄清楚。

我有一个列表，其中包含三个项目和三个相关锚点，位于页面的不同部分，指向这些项目。

单击锚点时，我希望相关列表项的锚点获得“cur”类（用于当前），如下图所示。同时从其他两个列表项中删除“cur”类。

这里是锚点：

<a href="#text-3" id="openSidebar"></a>
<a href="#text-5" id="about"></a>
<a href="#twitter-5" id="socialMedia"></a>

这里是列表：

<ul class="thumbNav">
<li class="first"><a href="#" class="panel1 cur">1</a></li>    
<li   class=""><a href="#" class="panel2">2</a></li>    
<li class="last"><a href="#" class="panel3">3</a></li></ul>
</ul>

所以它们都各自相关。

Answer 1

在您的列表项中添加一个对应的类

HTML

<div id="giveItAName">
<a href="#text-3" id="openSidebar"></a>
<a href="#text-5" id="about"></a>
<a href="#twitter-5" id="socialMedia"></a>
</div>

<ul class="thumbNav">
<li class="first openSidebar"><a href="#" class="panel1 cur">1</a></li>    
<li   class="about"><a href="#" class="panel2">2</a></li>    
<li class="last socialMedia"><a href="#" class="panel3">3</a></li></ul>
</ul>

Javascript

$("#giveItAName a").click(function(){
      $("#thumNav a").removeClass("cur");

      var item = $(this).attr("id");
      $("#thumbNav ." + item + " a" ).addClass("cur");
})

更新

由于锚点分散在页面上，将它们称为一个通用类并将其用作选择器：

<a href="#text-3" class="opener" id="openSidebar">Side Bar</a>
<a href="#text-5" class="opener" id="about">About</a>
<a href="#twitter-5" class="opener" id="socialMedia">Social</a>

<ul class="thumbNav">
    <li class="first openSidebar"><a href="#" class="panel1 cur">1</a></li>
    <li class="about"><a href="#" class="panel2">2</a></li>
    <li class="last socialMedia"><a href="#" class="panel3">3</a></li>
</ul>

Javascript：

$("a.opener").click(function () {
    $(".thumbNav a").removeClass("cur");
    var item = $(this).attr("id");
    $(".thumbNav ." + item + " a").addClass("cur");
})

Demo