[Javascript] Voce del menu evidenziata in base alla pagina attiva

macus_adi

Utente Attivo
5 Dic 2017
1.320
88
48
IT/SW
Credo che il richiedente dovrebbe chiarire questo punto perche se usa un editor per inserimento di html e quest ultimo e' identico in piu' pagine, non puo' cambiare la classe di li attiva di conseguenza serve una cosa dinamica...

Non è del tutto vero.... In basso è riportato esattamente questo caso, anche se duplichi codice a go go su più pagine lo script continua a funzionare, naturalmente deve essere incluso su più pagine.

Mantenendo la logica usata fin d'ora, potresti aggiungere un piccolo script:
Codice:
$(document).ready(function(){
    $('.item').removeClass('attiva');
    var url = window.location.href.split('/').pop();
    var links=$('.nav_item');
    _.each(links,function(v,k){
        var current=$(v).attr('href');
        if(url===current){
            $(v).parent().addClass('attiva');
        }
    });
});
Il tuo html dovrebbe diventare una cosa del genere, aggiungi la classe nav_item al tag a
HTML:
<ul>
    <li class="attiva item"><a href="home.php" class="nav_item" data-name="home" target="_self">Home</a></li>
    <li class="item"><a href="pag1.html" class="nav_item" data-name="pag1" target="_self">pag1</a></li>
    <li class="item"><a href="pag2.html" class="nav_item" data-name="pag2" target="_self">pag2</a></li>
    <li class="item"><a href="pag3.html" class="nav_item" data-name="pag3" target="_self">pag3</a></li>
</ul>
Lascia stare i data-name ho fatto una prova non inerente a questo contesto, e includi la Lib Underscore in tutte le pagine:
Codice:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>

Con queste linee di "codice" anche se ricarichi la/e pagina e/o aggiungi pagine a go go, non hai bisogno di scrivere / aggiungere nulla sullo script, in quanto attraverso l'each verifica tutti gli elementi del menu.

Risultato funzionante!
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Buongiorno Macus.
Ho provato a cambiare lo script in questo modo, visto che tutti i "li" hanno già la classe "page" e ho sostituito "attiva" con "selected", che è il mio CSS per la pagina attiva:

Codice:
 $(document).ready(function(){
    $('.page').removeClass('selected');
    var url = window.location.href.split('/').pop();
    var links=$('.nav_item');
    _.each(links,function(v,k){
        var current=$(v).attr('href');
        if(url===current){
            $(v).parent().addClass('selected');
        }
    });
});

Pare non funzionare nel mio caso, ma a questo punto, scusandomi per la mia scarsa conoscenza sull'argomento, ho dei dubbi:
1) in che posizione dell'html devo inserire
Codice:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
, va bene anche subito prima della funzione js in questione?

2) qual è il tag corretto per includere la funzione?
3) se ho un'altra funzione js nella pagina, le inserisco nello stesso tag "<script></script>", semplicemente separandole con ";"? O devo mettere tag separati? (ho già provato in entrambi i modi).
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.338
336
83
Non posso credere che si debba cercare un improbabile modo in JS e non poter usare il css e basta
 

macus_adi

Utente Attivo
5 Dic 2017
1.320
88
48
IT/SW
@Max 1 hai ragione, sarebbe stato meglio avere il menu a modi widget, con classe adatta al caso, ma mi pare di aver capito che di classi / funzioni / mvc / ogetti non si parla, quindi non credo sia la strada giusta da perseguire in caso di mancata conoscenza degli strumenti...
Sarebbe utile, magari qui tutti ne parlano ma pochi lo fanno, utilizzare il modello MVC, demandando al controller l'onere di effettuare le opportune verifiche sul menù.
In un caso drastico, avendo replicato il menu a manina su 100 pagine, come ti comporteresti, scrivendo la logica su tutti i file?
Indubbiamente concordo con te, quindi sarebbe da scrivere ex-novo parametrizzando il tutto nel giusto modo...
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Non posso credere che si debba cercare un improbabile modo in JS e non poter usare il css e basta
@Max 1 hai ragione, sarebbe stato meglio avere il menu a modi widget, con classe adatta al caso, ma mi pare di aver capito che di classi / funzioni / mvc / ogetti non si parla, quindi non credo sia la strada giusta da perseguire in caso di mancata conoscenza degli strumenti...
Sarebbe utile, magari qui tutti ne parlano ma pochi lo fanno, utilizzare il modello MVC, demandando al controller l'onere di effettuare le opportune verifiche sul menù.
In un caso drastico, avendo replicato il menu a manina su 100 pagine, come ti comporteresti, scrivendo la logica su tutti i file?
Indubbiamente concordo con te, quindi sarebbe da scrivere ex-novo parametrizzando il tutto nel giusto modo...
Beh, di fatto nell'editor di aruba già c'è un widget che fa da menu di navigazione (widget.extendednavigation) e in effetti l'html che ho utilizzato è esattamente quello estrapolato, per mezzo della console, dal widget base, perché mi serviva il menu sia in italiano che in inglese, e l'editor non consente di inserirne due, o per lo meno io non so come si possa fare e aruba non da assistenza sviluppo, mentre basekit (proprietario dell'editor), non la fornisce ai clienti aruba o_O.
Purtroppo, il mio html, pur avendo id e classi del tutto simili a quelle del widget.extendednavigation, non assorbe tutte le funzioni js di quel widget (contenute in un file js lunghissimo, di cui non conosco la esatta collocazione, e per me molto complesso), in particolare per la parte responsive e per mettere in evidenza la voce attiva.
Ieri, vedendo che non arrivavamo a una soluzione, ho risolto coi CSS, ma per fare questo ho dovuto creare ben 10 file.twig aggiuntivi per le singole pagine, oltre a quelli della home in italiano e della home in inglese, quindi 12 in totale. Originariamente ne avevo solo 4 (home e default, italiano e inglese) e speravo, con js di potere appunto ridurre la cosa.
 
Ultima modifica:

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Macus, penso di aver seguito bene il tuo esempio, ma non va. Preciso che nel mio caso il menu è nell'head e non nel body.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Daniele450 [Javascript] Linkare ogni sigola voce dello stesso menu ad un div diverso della stessa pagina Javascript 3
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
L [Javascript] input variabili di scrittura con canvas Javascript 2
G [Javascript] Passare un valore via querystring Javascript 1
max1974 [Javascript] Funzione Errata procedura Javascript 2
R [Javascript]gratta e vinci Javascript 2
max1974 [Javascript] Load Default image Javascript 2
bubino8 [Javascript] popup di controllo elimina dopo window.print(); Javascript 0
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1

Discussioni simili