[JAVASCRIPT] Menù semplice

[cenarius_88]

E rieccomi...

Ho creato un sito semplice, con un menù laterale... banale...

La struttura per ogni pagina è la seguente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
    <title>Pagina</title>
    <link href="css/Menu.css" rel="stylesheet" type="text/css" />
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
     
</head>
<body>
    <div id="container">
        <!--#include file="header.htm"-->
        <!--#include file="menu.htm"-->
        <div id="pages">
            <!--#include file="Pagina.htm"-->
        </div>
        <!--#include file="footer.htm"-->
    </div>
</body>

e il menu.htm è così

        <div id="menu">
                <ul id="listmenu" class="menu">
                        <li><a id="home" href="home.shtml"><span>Home</span></a></li>
                        <li><a id="staff" href="staff.shtml"><span>Staff</span></a></li>
                        <li><a id="gallery" href="gallery.shtml"><span>Galleria</span></a></li>
                        <li><a "contacts" href="contacts.shtml"><span>Contatti</span></a></li>
                        <li><a "links" href="links.shtml"><span>Links Utili</span></a></li>
                </ul>
        </div>

Così facendo tutto funziona... quello che volevo implementare io è una cosa del genere:
Quando accedo alla pagina, nella sezione menù, la pagina selezionata deve essere appariscente...
nel CSS del menù ho creato una classe "active", mettendola manualmente su una voce file menu.htm, quando accedo alle pagine la voce è appariscente...

Vorrei che questa selezione fosse "dinamica"... cioè se clicco un un link dal menù, va alla pagina selezionata, e in base alla pagina in cui si ritrova un determinato elemento della lista dei menù deve cambiare.

Facendo alcune prove... in java script

<script type="text/javascript">       
               // Il tuo codice va qui 
               $(document).ready(function() {
               // salvo il link pagina attuale 
               pagina=location.href;
               //splitto secondo il carattere "/"
               pagina=location.href.split("/");
               //siccome l'indirizzo è del tipo http://path/nomefile.shtml, prendo il quarto campo [3], che è nomefile.html, splitto secondo il carattere "." e prendo solo il primo campo [0]
               pagina=(pagina[3].split("."))[0];
               // per vedere se funziona visualizzo un popup col nomepagina
               alert(pagina);
               //cerco l'elemento con l'id = pagina e gli assegno la classe active
               document.getElementById(pagina).className="active";
               });
</script>

Tuttavia inserendo lo script nella pagina home.shtml
non visualizzo il popup... e non visualizzo i cambiamenti...

sto testando in un file separato... il popup c'è, corretto... i avvengono correttamente....

Sul file principale... nulla .-.

Che fare?

[EDIT] Risolto, avevo dimenticato d'includere il jquery... ho messo lo script in un file separato... ho linkato lo stesso come javascript sull'header di ogni pagina, e tutto funziona...

[Dan__88]

scusa in pratica carichi tutte le pagine e le tieni nascoste, mostrando solo quella corrente?

[cenarius_88]

no assolutamente... stile pagina.... tutto quello che è esterno è uguale in ogni pagina (header, footer, menu, stili, javascript) e lo inglobo col metodo delle inclusioni SSI Inclusioni...

quindi io clicco sul tasto galleria del menù, apro il file path/galleria.shtml, che viene caricato, il server elabora gli include, il codice javascript prende il link pagina corrente, lo splitta, prende la parte galleria.html, splitta ancora, ottiene galleria... cerca nella pagina corrente l'elemento dall'id galleria, e a quell'elemento associa la class "active"... così facendo la parte del menù indicante galleria viene messa in evidenza