如何使用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”><a href="default.html">Home</a></li> 。

如何在jQuery和JavaScript中做到這一點（我需要兩個不同的網站）。 誰能幫我？

謝謝你的幫助。

Answer 1

獲取您的網址/解析它：

var pathname = window.location.pathname;

然后添加類：

jQuery：

$(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;
        }
    });
});