Выделить активную ссылку

Question

Как я могу выделить активную ссылку при нажатии, но сохранить ссылку главной страницы, пока не будет нажата другая ссылка?

Я использую PHP, если это помогает.

Вот мой (x) код HTML.

<div id="nav"> 
    <ul> 
     <li><a href="http://localhost/link-1/" class="active">Link 1</a></li> 
     <li><a href="http://localhost/link-2/">Link 2</a></li> 
     <li><a href="http://localhost/link-3/">Link 3</a></li> 
     <li><a href="http://localhost/link-4/">Link 4</a></li> 
    </ul> 
</div> 

Answer 1

Я не на месте, чтобы проверить это прямо сейчас, сообщите мне, если он сработает для вас.

var menuArray = new Array(); 

$(function() { 


    $('div#nav ul li').each(function(i) { 
     menuArray[i] = this; 
     $(this).click(function() { 
      for (var x in menuArray) 
       if (x == this) 
        $(x).attr('class','active'); 
       else 
        $(x).attr('class','inactive'); 
     }); 
    }); 
}); 

EDIT хорошо, я был в состоянии проверить это, и это работает для меня. Имейте в виду, что это должно быть после объявления HTML.

$("li a").each(function(i) { 
     $(this).click(function() { 
      $(this).attr('class','selected'); 
      $("li a").not(this).attr('class','notselected'); 
     }); 
}); 

Answer 2

Вы можете сделать метод в PHP, вот пример:

<div id="nav"> 
    <ul> 
     <li><a href="http://localhost/link-1/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-1')?>>Link 1</a></li> 
     <li><a href="http://localhost/link-2/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-2')?>>Link 2</a></li> 
     <li><a href="http://localhost/link-3/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-3')?>>Link 3</a></li> 
     <li><a href="http://localhost/link-4/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-4')?>>Link 4</a></li> 
    </ul> 
</div> 
<?php 
function activateLink($uri,$var) 
{ 
    if($uri==$var) { 
     return 'class="active"'; 
    } 
} 
?> 

На каждой странице печати $ _SERVER [ 'REQUEST_URI'] и передать второй параметр метода.

Answer 3

То есть не требует PHP вообще, однако вы можете создать его на PHP. Я продемонстрирую вам, как это сделать в HTML/CSS.

Попробуйте CSS/HTML в документе (до кода):

<style> 
     .active { 
      color:#336699; 
     } 

     div#nav ul li a { 
      color:#121212; 
     } 

     div#nav ul li a:visited { 
      color:#336699; 
     } 
</style> 

Это должно окрашивать все ссылки синим, если они посетили, и если они гавань будет темно-серый. Однако, если вы хотите выделить только одну ссылку, лучше всего использовать JQuery, поскольку она имеет множество функций, чтобы выбрать только тот, который выбран.

Надеюсь, что помогает.