javascript - 如何使用 jQuery 和 javascript 向元素添加类？

Question

我有下面给出的 HTML 代码来将导航添加到我的网站。（注意列表是嵌套的）

<div id="navigation">
       <ul>
        <li><a href="default.html">Home</a></li>
        <li><a href="about.html">About us</a></li>
        <li><a href="help.html">Help</a></li>
        <li><a href="#">DropDown</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li class="last"><a href="#">A Last Link Text</a></li>
      </ul>
</div>

我想以新颜色显示当前活动的页面链接。所以相应的列表项应该有活动的类，我使用 CSS 来改变颜色。例如，如果default.html是当前打开的页面，则代码应为<li class=“active”&gt;<a href="default.html">Home</a></li>.

如何在 jQuery 和 JavaScript 中做到这一点（我需要两个不同的网站）。谁能帮我？

谢谢你的帮助。

Answer 1

获取您的 URL / 解析它：

var pathname = window.location.pathname;

然后添加类：

查询：

$(element).addClass('classname');

JS：如何向给定元素添加类？

Answer 2

尝试这个

$(document).ready(function () {
    var url = location.href;
    $('#navigation li a').each(function () {
        var thisHref = this.getAttribute('href');
        if (thisHref !== '#' && url.indexOf(thisHref) !== -1) {
            $(this.parentNode).addClass('active');
            return;
        }
    });
});