如何添加 Class() 以根据当前 URL 列出项目

Question

我的网站目前有一个非常酷的导航栏，但我希望让它变得更好。这是我的问题：

谁能帮我修复我的 JS 脚本，以便根据当前 url，我菜单中的列表项将具有 class "active"，以及所有其他列表项使用不同的 URLs 将保持其默认的非活动 classes?

到目前为止我会提供我的代码。

HTML

      <li class="nav-home"><a href="index.php">home</a></li>

      <li class="dropdown nav-portfolio"><a href="portfolio.php">portfolio</a>

<ul>

          <li><a href="#">Photography</a></li>

          <li><a href="#">Videos</a></li>

        </ul>

      </li>

      <li class="nav-aboutme"><a href="about-me.php">about me</a></li>

      <li class="dropdown nav-socialmedia"><a href="social-media.php">social media</a>

<ul>

          <li><a href="#">facebook</a></li>

          <li><a href="#">twitter</a></li>

          <li><a href="#">instagram</a></li>

          <li><a href="#">youtube</a></li>

          <li><a href="#">vine</a></li>

          <li><a href="#">snapchat</a></li>

          <li><a href="#">shots</a></li>

          <li><a href="#">google+</a></li>

        </ul>

      </li>

      <li class="nav-contact"><a href="contact.php">contact</a></li>

      <li class="dropdown"><a href="#">more</a>

        <ul>

          <li><a href="#">blog</a></li>

          <li><a href="#">faq</a></li>

          <li><a href="#">equipment</a></li>

        </ul>

      </li>

    </ul>

JS

if(window.location.href == "http://www.example.com/index.php"){
    $('.nav-home').addClass('active');
} else if(window.location.href == "http://www.example.com/portfolio.php"){
    $('.nav-portfolio').addClass('active');
} else if(window.location.href == "http://www.example.com/about-me.php"){
    $('.nav-aboutme').addClass('active');
} else if(window.location.href == "http://www.example.com/social-media.php"){
    $('.nav-socialmedia').addClass('active');
} else if(window.location.href == "http://www.example.com/contact.php"){
    $('.nav-contact').addClass('active');
} else {
    exit();
}

我有运行我的 JS 通过语法检查器，它说它是正确的，但是这段代码没有将 class 添加到任何列表项。因此，总结一下，如果有人可以帮助我修复我的代码，那么 class "active" 将添加到与当前 url 相对应的列表项中。（查看列表项和 URL 的 JS）任何帮助将不胜感激！

Answer 1

对于这种情况你应该使用 switch

switch(expression) {
case n:
    code block
    break;
case n:
    code block
    break;
default:
    default code block

}

更多信息：http://www.w3schools.com/js/js_switch.asp

Answer 2

代码有作用吗？你说它没有做你想让它做的事？它在做什么？没有什么？尝试做

alert(window.location.href)

并查看您实际获得的值。你可以试试

if(window.location.href === "http://www.example.com/index.php")

如何添加 Class() 以根据当前 URL 列出项目

How to addClass() to list item based on current URL

html

javascript

jquery

addclass