javascript - 从页面上的其他相应元素向元素添加类

Question

我希望标题不会太困惑。

首先让我说我不是 jQuery 大师，虽然我可以做一些基本的事情，但这个有点让我头疼。

描述

我有一个链接列表(4 个链接)，当用户单击/点击链接时，浏览器会跳转到页面下方的相应部分。有一个“顶部”链接可以跳回列表。简单。

问题

我需要的是一种将类添加到用户单击/点击的链接对应的部分的方法。

HTML

这是我的链接列表:

<ol class="subjects">
    <li><a href="#folderstructure">Folder Structure</a></li>
    <li><a href="#namingconventions">Naming Conventions</a></li>
    <li><a href="#codingstyle">Coding Style</a></li>
    <li><a href="#credits">Credits</a></li>
</ol>

这是我的部分的结构:

<ol class="subjects--sections">
    <li id="folderstructure">Heading...<a href="#top">Top &uarr;</a></li>
    <li id="namingconventions">Heading...<a href="#top">Top &uarr;</a></li>
    <li id="codingstyle">Heading...<a href="#top">Top &uarr;</a></li>
    <li id="credits">Heading...<a href="#top">Top &uarr;</a></li>
</ol>

所以我需要的是将类 active 添加到相应部分的方法，所以如果 #folderstructure 被单击/点击，那么 li 看起来像这样:

<li id="folderstructure" class="active">Heading...<a href="#top">Top &uarr;</a></li>

如果单击/点击 #namingconventions，则 li 将如下所示:

<li id="namingconventions" class="active">Heading...<a href="#top">Top &uarr;</a></li>

以此类推其他部分，有意义吗？

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

你可以这样做:

$('.subjects a').on('click',function(){
   $('.subjects--sections .active').removeClass("active"); // removes active class
   $($(this).attr("href")).addClass("active"); // adds it again
});

DEMO