jQuery активная ссылка текущая страница

Question

Я пробовал несколько сценариев jQuery, чтобы моя навигация имела активное состояние каждой кнопки, когда пользователь находится на каждой странице.

Мой навигации выглядит следующим образом: http://jsfiddle.net/EWhS3/

или

<div id="wrapper"> 
     <div id="header"> 
      <img src="img/logo.png"> 
     </div> 
     <!--header END--> 
     <div id="nav"> 
      <ul>   
       <li><a href="index.php" class="select">Profil</a></li> 
       <li><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li> 
       <li><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li> 
       <li><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li> 
       <li><a href="blog.php" class="pushlinks" class="select">Blog</a></li> 
       <li><a href="#" class="pushlogin" class="select">Login</a></li> 
      </ul> 
     </div> 
     <!--nav END--> 
     <div id="content"> 
     </div> 
    </div> 

Я хочу, чтобы парить эффект будет оставаться активным, когда пользователь посещает каждую страницу.

Я действительно надеюсь, что кто-то может дать мне идею для этого. Я попробовал несколько вещей, но на самом деле не мог заставить его работать :(

Заранее спасибо;)

Answer 1

Попробуйте

jQuery(function() { 
    var page = location.pathname.split('/').pop(); 
    alert(page) 
    $('#nav li a[href="' + page + '"]').addClass('active') 
}) 

Также измените hover & active правило

#nav ul li a:hover, #nav ul li a.active { 
    ... 
} 

Демонстрация: Fiddle

Answer 2

<div id="nav"> 
     <ul>   
      <li id="nav1"><a href="index.php">Profil</a></li> 
      <li id="nav2"><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li> 
      <li id="nav3"><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li> 
      <li id="nav4"><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li> 
      <li id="nav5"><a href="blog.php" class="pushlinks" class="select">Blog</a></li> 
      <li id="nav6"><a href="#" class="pushlogin" class="select">Login</a></li> 
     </ul> 
    </div> 

<script type="text/javascript">//<![CDATA[ 
$('#nav1').addClass('active'); 
    //]]></script> 


div#nav ul li.active{ 
/*your style */ 
} 

Answer 3

Вы можете сделать это легко

<script type="text/javascript"> 
    var loc = window.location.pathname; 

    $('#nav').find('a').each(function() { 
    $(this).toggleClass('active', $(this).attr('href') == loc); 
    }); 
</script> 

CSS:

#nav a.active{color: red}