如何將addClass（）添加到基於當前URL的列表項目

Question

我的網站目前有一個很酷的導航欄，但我期待它更好。這是我的問題：

有人可以幫助我修復我的JS腳本，以便根據當前的URL，我的菜單中的列表項目將具有「活動」類別，並且具有不同URL的所有其他列表項目將保持其狀態默認的，非活動類？

我會提供我的代碼到目前爲止。

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，它說，這是正確的，但是這個代碼不將該類添加到任何的列表項。所以，只需要總結一下，如果有人能幫我修復我的代碼，那麼類「active」被添加到與當前url相對應的列表項中。 （見列表項目和URL的JS）任何幫助將不勝感激！

Answer 1

對於這種情況，你應該使用開關

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")