Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    evidenziare voce della pagina attiva nel menu di navigazione

    Ciao a tutti.
    Come posso evidenziare la voce della pagina attiva nel menu di navigazione, usando javascript (no jquery)?

    L'HTML del menu
    codice:
        <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>
    Ho già impostato la classe CSS .selected per dare uno stile diverso alla pagina attiva, ma non riesco ad assegnarla con javascript.
    N.B.: non posso utilizzare php e jquery.

    Grazie in anticipo a chiunque voglia aiutarmi.
    Ultima modifica di PavlovTheDog; 20-04-2018 a 15:20

  2. #2
    Utente di HTML.it L'avatar di stoneweb
    Registrato dal
    Jul 2016
    residenza
    Torino
    Messaggi
    162
    Un modo semplice potrebbe essere quello di controllare il pathname e a seconda dei casi assegnare la classe selected a una voce del menu.
    Il pathname puoi ottenerlo con
    codice:
    window.location.pathname
    Work hard. Code harder.

  3. #3
    Utente di HTML.it L'avatar di Marcolino's
    Registrato dal
    May 2003
    residenza
    Udine
    Messaggi
    3,606
    Preso dal sito di Gabriele Romanato: https://gabrieleromanato.com/2017/01...lass-di-jquery
    codice:
    var toggleClass = function(el, className) {    el.classList.toggle(className);};
    Dove el = l'ID dell'elemento a cui va modificata la classe, e className ovviamente il nome della classe da modificare.
    Non l'ho provato, ma se className lo passi vuoto, credo tu possa anche togliere una classe senza inserirne alcuna.

    Oppure, presa da W3School: https://www.w3schools.com/jsref/tryi...assname_toggle
    codice:
    function myFunction() {
        var x = document.getElementById("myDIV");
        if (x.className === "mystyle") {
            x.className = "mystyle2";
        } else {
            x.className = "mystyle";
        }
    }
    Dove al posto di un DIV metti l'elemento di lista che vuoi evidenziare.

  4. #4
    Quote Originariamente inviata da Marcolino's Visualizza il messaggio
    Preso dal sito di Gabriele Romanato: https://gabrieleromanato.com/2017/01...lass-di-jquery
    codice:
    var toggleClass = function(el, className) {    el.classList.toggle(className);};
    Dove el = l'ID dell'elemento a cui va modificata la classe, e className ovviamente il nome della classe da modificare.
    Non l'ho provato, ma se className lo passi vuoto, credo tu possa anche togliere una classe senza inserirne alcuna.

    Oppure, presa da W3School: https://www.w3schools.com/jsref/tryi...assname_toggle
    codice:
    function myFunction() {
        var x = document.getElementById("myDIV");
        if (x.className === "mystyle") {
            x.className = "mystyle2";
        } else {
            x.className = "mystyle";
        }
    }
    Dove al posto di un DIV metti l'elemento di lista che vuoi evidenziare.
    Grazie della risposta. Per ora ho risolto coi CSS (allngando la parte html, replicando il codice per ogni singola pagina).
    Non so se le soluzioni proposte possano funzionare. Il fatto è che l'elemento di lista che voglio evidenziare non devo dirglielo io di volta in volta, ma dovrebbe stabilirlo il javascript a seconda della pagina attiva. Ora, sono sicuramente ignorante, ma queste due funzioni non mi sembrano esaustive in tal senso.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.