Menu navigazione: evidenziare link al click

feelthemusic

Nuovo Utente
29 Nov 2012
14
0
0
Salve a tutti, ho un pagina html strutturata con gli iframe. Nell'iframe vengo caricati i link del menu di navigazione. Vorrei sapere se è possibile fare in modo che al click di un link nel menu di navigazione il link stesso venga evidenziato e che cliccando su un altro link quello precedente torni normale e venga evidenziato solo quello corrispondente alla pagina visualizzata. Non so se mi sono spiegato bene xD cmq qualcuno mi sa aiutare?
 
Piccolo esempio che ho preparato al volo:
HTML:
<!DOCTYPE html>
<html lang="it">
  <head>
    <title>Evidenziazione link</title>
    <meta charset="utf-8" />

    <style type="text/css">
    .active { font-weight: bold; }
    </style>
  </head>

  <body>
    <nav id="menu">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </nav>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $("#menu li").click(function() {
        $("#menu li.active").removeClass("active");
        $(this).addClass("active");
      });
    });
    </script>
  </body>
</html>
Ovviamente per modificare lo stile dei link attivi basta modificare la classe active.
 

Discussioni simili