|
|||||||
|
|
|
 |
|
|
Strumenti |
22-02-2012, 17:01
|
#1 |
|
Member
Iscritto dal: Nov 2007
Città: Alcamo
Messaggi: 103
|
[JAVASCRIPT] Menù semplice
E rieccomi...
Ho creato un sito semplice, con un menù laterale... banale... La struttura per ogni pagina è la seguente Codice:
<!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>
Codice:
<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>
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 Codice:
<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>
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... Ultima modifica di cenarius_88 : 22-02-2012 alle 17:23. |
|
|
|
27-02-2012, 15:11
|
#2 |
|
Senior Member
Iscritto dal: Aug 2011
Messaggi: 672
|
scusa in pratica carichi tutte le pagine e le tieni nascoste, mostrando solo quella corrente?
|
|
|
|
|
27-02-2012, 15:41
|
#3 |
|
Member
Iscritto dal: Nov 2007
Città: Alcamo
Messaggi: 103
|
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 Ultima modifica di cenarius_88 : 27-02-2012 alle 15:45. |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 05:38.
