JavaScript добавить класс в зависимости от текущего URL

Question

Для навигации по моему веб-сайту мне нужно добавить класс 'active' к элементу li в зависимости от того, соответствует ли он текущему URL.

Нав HTML:

<ul id="nav">
    <div id="wrapper">
        <li><a href="/">Home</a></li>
        <li><a href="/tagged/Review">Reviews</a></li>
        <li><a href="/tagged/First_Look">First Looks</a></li>
        <li><a href="/tagged/Commentary">Commentaries</a></li>
        <li><a href="/tagged/Walkthrough">Walkthroughs</a></li>
        <li><a href="/tagged/Achievement">Achievements</a></li>
    </div>
</ul>

Answer 1

Если вы хотите использовать «чистый» ( «ванильный» ) JavaScript, используйте следующий код (при условии, что <ul id="nav"> существует):

window.onload = function() { 
    var all_links = document.getElementById("nav").getElementsByTagName("a"),
        i=0, len=all_links.length,
        full_path = location.href.split('#')[0]; //Ignore hashes?

    // Loop through each link.
    for(; i<len; i++) {
        if(all_links[i].href.split("#")[0] == full_path) {
            all_links[i].className += " active";
        }
    }
}

Используя jQuery:

$(document).ready(function(){
    var full_path = location.href.split("#")[0];
    $("#nav a").each(function(){
        var $this = $(this);
        if($this.prop("href").split("#")[0] == full_path) {
            $this.addClass("active");
        }
    });
});

Answer 2

Я думаю, в этом случае лучше изменить на стороне сервера.

Используя javascript вы можете сделать:

var target = 0;
switch( window.location.pathname )
{
    case "/tagged/Review":
        target = 1;
        break;

    case "/tagged/First_Look":
        target = 2;
        break;
    /* add other cases */
}

document.getElementById("nav").getElementByTagName("li")[target].classList.add("active");

Поставить код после загруженного DOM.

Если jquery, вы можете использовать:

var target = 0;
switch( window.location.pathname )
{
    case "/tagged/Review":
        target = 1;
        break;

    case "/tagged/First_Look":
        target = 2;
        break;
    /* add other cases */
}

$($("#nav li")[target]).addClass("active");

EDIT

window.onload или $ .ready - это способ узнать, загружен ли документ.