evidenziare voce della pagina attiva nel menu di navigazione

[PavlovTheDog]

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

L'HTML del menu

    <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.

[stoneweb]

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

window.location.pathname

[Marcolino's]

Preso dal sito di Gabriele Romanato: https://gabrieleromanato.com/2017/01...lass-di-jquery

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

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.

[PavlovTheDog]

Preso dal sito di Gabriele Romanato: https://gabrieleromanato.com/2017/01...lass-di-jquery

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

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.