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

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Salve amici.
Ho bisogno di fare in modo che nel mio menu di navigazione venga evidenziata la voce relativa alla pagina che si sta visitando in quel momento.
Ho provato varie soluzioni javascript, ma credo che, essendo un neofita, non riesco ad adattarle come si deve.

Il codice HTML del menu è del tipo seguente:

HTML:
<div id="page-zones__template-widgets__extendednavigation-navigation" class="widget extendednavigation" data-widget-type="extendednavigation" data-uniqueid="page-zones__template-widgets__extendednavigation-navigation">
  <div class="extendednavigation"  align="center">
    <ul id="menunav" class="js-menu-list 13-items">
       <li id="menu-item_1" class="home  page"><a href="/"><span class="text">pagina iniziale</span></a></li>
       <li id="menu-item_2" class="page  folder" aria-haspopup="true"><a href="/galleria"><span class="text">galleria</span></a>
         <ul class="js-menu-list 2-items page">
           <li id="menu-item_3" class="page"><a href="/acquerello"><span class="text">acquerello</span></a></li>
           <li id="menu-item_4" class="page"><a href="/incisione"><span class="text">incisione</span></a></li>
          </ul>
       </ul>
         <a onclick="showNav()" href="#" class="pull  js-pull"></a>
</div>
</div>

Ho già impostato la classe "li.selected a .text" nei CSS con un colore specifico.

Grazie a chiunque voglia aiutarmi con javascript.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Cosa centra Javascript? Non basta il CSS?
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
In ogni caso prova questo, che e' in jQuery.
Codice:
<script>

            jQuery(document).ready(function () {
                function current_page() {
                    var pathname = window.location.pathname;
                     var li_id;
                    switch (pathname) {
                        case  "" :
                        case "/":
                            li_id = "#menu-item_1";
                            break;
                        case  "/galleria":
                        case "/galleria/":
                            li_id = "#menu-item_2";
                            break;
                        case  "/acquerello":
                        case "/acquerello/":
                            li_id = "#menu-item_3";
                            break;
                        case  "/incisione":
                        case "/incisione/":
                            li_id = "#menu-item_4";
                            break;
                        default :
                            li_id = "not_a_menu";
                    }

                    if (jQuery(li_id).length) {
                        jQuery(li_id).addClass("selected");
                    }

                }
                current_page();
            });
        </script>
Se la libreria jQuery non e' caricata, prima del codice qui sopra aggiungi questo
Codice:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Index
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.attiva {
    background: #FF0004;
    color: #FFFFFF;
}
</style>
</head>

<body>
<ul>
    <li class="attiva"><a href="index.html" target="_self">Home</a></li>
    <li><a href="pag1.html" target="_self">pag1</a></li>
    <li><a href="pag2.html" target="_self">pag2</a></li>
    <li><a href="pag3.html" target="_self">pag3</a></li>
</ul>
</body>
</html>
pag1
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.attiva {
    background: #FF0004;
    color: #FFFFFF;
}
</style>
</head>

<body>
<ul>
    <li><a href="index.html" target="_self">Home</a></li>
    <li class="attiva"><a href="pag1.html" target="_self">pag1</a></li>
    <li><a href="pag2.html" target="_self">pag2</a></li>
    <li><a href="pag3.html" target="_self">pag3</a></li>
</ul>
</body>
</html>
Ecc. per le altre pagine
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Index
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.attiva {
    background: #FF0004;
    color: #FFFFFF;
}
</style>
</head>

<body>
<ul>
    <li class="attiva"><a href="index.html" target="_self">Home</a></li>
    <li><a href="pag1.html" target="_self">pag1</a></li>
    <li><a href="pag2.html" target="_self">pag2</a></li>
    <li><a href="pag3.html" target="_self">pag3</a></li>
</ul>
</body>
</html>
pag1
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.attiva {
    background: #FF0004;
    color: #FFFFFF;
}
</style>
</head>

<body>
<ul>
    <li><a href="index.html" target="_self">Home</a></li>
    <li class="attiva"><a href="pag1.html" target="_self">pag1</a></li>
    <li><a href="pag2.html" target="_self">pag2</a></li>
    <li><a href="pag3.html" target="_self">pag3</a></li>
</ul>
</body>
</html>
Ecc. per le altre pagine

Ciao. Sì, a questo avevo pensato, ma preferivo non aggiungere tutto sto html per fare un'operazione che ho letto si può fare con javascript più rapidamente (anche jquery, ma sinceramente ho l'impressione che non sia supportato nel mio caso).
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
Pensando ad uno sviluppo veloce, potresti bindare una classe in js e banalmente senza altri plugin con Jquery immaginando di avere una soluzione del genere:
HTML:
ul id="menunav" class="js-menu-list 13-items">
       <li id="menu-item_1" class="home  page item"><a href="/"><span class="text">pagina iniziale</span></a></li>
       <li id="menu-item_2" class="page  folder item" aria-haspopup="true"><a href="/galleria"><span class="text">galleria</span></a>
         <ul class="js-menu-list 2-items page">
           <li id="menu-item_3" class="page item"><a href="/acquerello"><span class="text">acquerello</span></a></li>
           <li id="menu-item_4" class="page item"><a href="/incisione"><span class="text">incisione</span></a></li>
          </ul>
       </ul>

Codice:
$(document).ready(function(){
    var menu=$('.item');
    menu.on('click',function(){
     
         $('.item').removeClass('active');
         $(this).addClass('active');
    });

});

Dovrebbe bastare... a patto che tu non faccia il refresh!
NB: ho aggiunto nella classe dei menu una voce item, che permette di aggiungere la classe active...
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
@PavlovTheDog
Quando apri una discussione devi specificare tutto subito e bene
Hai ragione, per scarsa conoscenza, non credevo fosse fondamentale e non volevo dilungarmi troppo.
Si tratta di un sito fatto su aruba, tramite basekit editor, modificando un template di quelli offerti. I miei file sono .twig e .less. Non so se c'è bisogno di sapere altro, scusa.
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
Domanda da 1 milione di dollari, ma al click tu effettui il refresh, della pagina.... quindi a che ti serve JS???? ha ragione @Max 1 , basta il CSS!
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Index
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.attiva {
    background: #FF0004;
    color: #FFFFFF;
}
</style>
</head>

<body>
<ul>
    <li class="attiva"><a href="index.html" target="_self">Home</a></li>
    <li><a href="pag1.html" target="_self">pag1</a></li>
    <li><a href="pag2.html" target="_self">pag2</a></li>
    <li><a href="pag3.html" target="_self">pag3</a></li>
</ul>
</body>
</html>
pag1
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.attiva {
    background: #FF0004;
    color: #FFFFFF;
}
</style>
</head>

<body>
<ul>
    <li><a href="index.html" target="_self">Home</a></li>
    <li class="attiva"><a href="pag1.html" target="_self">pag1</a></li>
    <li><a href="pag2.html" target="_self">pag2</a></li>
    <li><a href="pag3.html" target="_self">pag3</a></li>
</ul>
</body>
</html>
Ecc. per le altre pagine

Purtroppo non va. :(
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
Domanda da 1 milione di dollari, ma al click tu effettui il refresh, della pagina.... quindi a che ti serve JS???? ha ragione @Max 1 , basta il CSS!
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...
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Bugia che non vada!! Il mio è solo un esempio buttato lì per farti capire come funzione! È ovvio che vuole adattato al tuo contesto!
 

macus_adi

Utente Attivo
5 Dic 2017
1.343
91
48
IT/SW
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
            src="http://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <style>
        .attiva {
            background: #FF0004;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<ul>
    <li class="attiva item"><a href="#index.html" target="_self">Home</a></li>
    <li class="item"><a href="#pag1.html" target="_self">pag1</a></li>
    <li class="item"><a href="#pag2.html" target="_self">pag2</a></li>
    <li class="item"><a href="#pag3.html" target="_self">pag3</a></li>
</ul>

<script>
    $(document).ready(function(){
        var menu=$('.item');
        menu.on('click',function(){
            $('.item').removeClass('attiva');

            $(this).addClass('attiva');
        });

    });
</script>

</body>
</html>
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
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...
Sì, effettua il refresh.
Tento di chiarire ancora meglio. Ho un file "layout.twig" impostato così:
HTML:
<!doctype html>
<!--[if lt IE 7]>
    <html class="no-js ie6 oldie" lang="en">
<![endif]-->
<!--[if IE 7]>
    <html class="no-js ie7 oldie" lang="en">
<![endif]-->
<!--[if IE 8]>
    <html class="no-js ie8 oldie" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <html class="js" lang="{{ page.seoLang }}">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{{ page.title }}</title>
    <meta name="keywords" content="{{ page.keywords }}" />
    <meta name="description" content="{{ page.description }}" />
    <meta http-equiv="content-language" content="{{ page.seoLang }}" />

    {% if site.favicon %}
        <link rel="icon" href="{{ site.favicon['favicon'] }}" type="image/x-icon" />
        <link rel="SHORTCUT ICON" href="{{ site.favicon['thumbnail'] }}?v={{ "now"|date("U") }}" type="image/x-icon" />
    {% endif %}
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    {% include basekit.headScript %}

</head>

<body class="{{ page.backgroundClass }}">

    {% block content %}
    {% endblock %}
    
    {% include basekit.bodyScript %}
    

<script type="text/javascript">
    ! function () {
        function supportsSVG() {
            return !!document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect
        }
        if (supportsSVG()) document.documentElement.className += ' svg'
    }()
</script>

</body>
</html>

E poi un home.twig e un default.twig che estendono l'html del layout.
Ho provato le vostre soluzioni, adattandole, ma per ora nada. E' anche molto probabile che io sbagli qualcosa quando le adatto, essendo un neofita. Vi prego di avere pazienza.
 
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
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
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
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
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
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
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
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
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 18
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

Discussioni simili