JavaScript, чтобы выделить активную страницу

Question

Я пытаюсь использовать JavaScript, чтобы выделить текущую страницу. У меня есть главное меню и подменю на странице. Я хочу, чтобы выделенное главное меню выглядело иначе, чем в подменю. Вот JavaScript, который я применил, чтобы применить класс css к текущей странице. Как мне получить 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

Укажите лучше селектор, когда вы перебирать подменю и переопределить некоторые свойства с «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 2

Это действительно зависит от страницы/структуры кода вы идете. Обычно я не проверяю window.location, но вместо этого устанавливаю атрибут rel на тело страницы. На домашней странице будет rel="home", на другой странице rel='other-page и так далее.

Таким образом, вы можете проверить атрибут body 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 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 чувствителен к регистру.