从页面上的其他相应元素向元素添加类答案

【问题标题】：Add class to element from other corresponding element on the page从页面上的其他相应元素向元素添加类
【发布时间】：2014-04-19 01:14:36
【问题描述】：

我希望标题不会太混乱。

首先让我说我不是 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>

其他部分等等，有意义吗？

任何帮助将不胜感激。谢谢！

【问题讨论】：

:target
@j08691 你让我想到了，是的，我已经在使用 :target 并且我需要定位一些 :before 伪元素，但我从未想过要这样做 :target:before，因此，不需要JavaScript...如果您将回复作为答案发布，我可以选择它作为正确答案。

标签： javascript jquery html html-lists

【解决方案1】：

你可以这样做：

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

DEMO

【讨论】：

天哪，这很容易。这部分对我来说很棘手吗$(this).attr("href")。我在这里对整个帖子进行了演示，供其他人参考：jsfiddle.net/9c4es。一百万谢谢阿米特！
是的。我将编辑我的答案以将其包含在我的答案中。顺便说一句，很高兴能帮助你；）
j08691's answer above using :target 与您的解决方案完全相同，因为它不使用 JS，我认为这是最好的方法。说实话，你的回答比我的问题的实际解决方案教会了我更多。再次感谢伙计！

【解决方案2】：

这里不需要 JavaScript，CSS 的 :target（和 :before）应该可以满足您的需求。

【讨论】：

是的，不需要 JavaScript。老实说，我低估了:target 的力量。这是一个使用 :target 的工作演示：jsfiddle.net/9c4es/2。非常感谢 j08691！

【解决方案3】：

Try it for better efficiency....


$(document).ready( function( ) {
    $('ol.subjects a').on( {
        "click" : function( ) {
                    var sel_href_attr; /* It'll contain clicked anchor tag href attribute valte*/

                    sel_href_attr = $(this).attr("href").slice(1);

                    $('ol.subjects--sections li.active').removeClass('active');
                    /*
                        If you want to remove "class" attribute then you may use below statement 
                        in spite of above jQuery statement
                        $('ol.subjects--sections li.active').removeAttr('class');
                    */    
                    $('ol.subjects--sections li#'+sel_href_attr).addClass('active');
                }
    } );
});

【讨论】：