Question

我知道有很多类似的问题，但我无法从中找出答案。

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

当点击一个锚时，我希望关联列表项的锚点得到一个＆＃34; cur＆＃34; （对于当前）如下图所示。同时删除课程＆＃34; cur＆＃34;来自其他两个列表项目之一。

以下是主播：

<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

在列表中添加一个相应的类itmes

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

如何添加和删除类？

1 个答案: