Question

我正在尝试使用JavaScript来突出显示当前页面。我有一个主菜单和页面上的子菜单。我希望突出显示的主菜单看起来与子菜单不同。这是我想出的将css类应用到当前页面的JavaScript。如何让JavaScript区分这两个不同的类？

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
    $(function(){
        $('a').each(function() {
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('main_current');
            }
        });
    });
</script>


<script>
    $(function(){
        $('a').each(function() {
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('sub_current');
            }
        });
    });
</script>

Answer 1

这实际上取决于您要使用的页面/代码结构。我通常不会检查window.location，而是在页面正文中设置rel属性。在主页上，正文将rel="home"，在其他页面上rel='other-page等等。

通过这种方式，您可以检查正文的rel属性，并根据该属性更改菜单/子菜单的状态。

(function(){
   var currentLocation = $('body').attr('rel');

   switch(currentLocation){
       case 'home':
           //add class to the home link
           break;

       case 'other-page':
           //add class to the other link
           break;
   }

})();

Answer 2

当您遍历子菜单并使用“sub_current”覆盖某些属性时，更好地指定选择器。 EG：

如果你有

<ul id="menu">
   <li><a href="thisPage.com">ThisMenu</a>
      <ul id="sub-menu">
         <li><a href="thisPage.com">ThisSubMenu</a></li> 
      </ul>
   </li>
</ul>

您可以使用$('#sub-menu a')指定。

我希望它有所帮助。

欢呼声

Answer 3

下面的方法会做同样的事情

$(function() {
 var url = document.location.href;
    if (url.indexOf("about") > -1) {
    $('#nav-bar ul li:contains("About")').addClass('sub_current');
}
 else if (url.indexOf("index") > -1) {
   $('#nav-bar ul li:contains("Home")').addClass('main_current');
}

else {
       // do something else
    }
});

注意：：包含selctor区分大小写。

JavaScript以突出显示活动页面

3 个答案: