Come applicare CSS per il menu durante la selezione?

Question

Ho un'attività per evidenziare il menu come selezionato durante il caricamento della pagina. Per questo ho il seguente codice:

$('.menuHeader').each(function() { 
    $(this).attr('id', 'menu' + ($(this).index() + 1)); 
    $(this).val($(this).index() + 1); 

    // Set the dynamic ids for links 
    $(this).find('a').attr('id', 'link' + ($(this).index() + 1)); 
    //alert('New ID : ' + $(this).find('a').attr('id')); 
}); 

$('.menuHeader a').click(function() { 
    alert("a"); 
    $('.menuHeader a').removeClass('menuHeaderActive'); 
    $(this).parent().parent(".menuHeader").addClass('menuHeaderActive'); 
}); 

Ma quando seleziono il secondo menu, è aggiornato e manca la selezione.

HTML:

<div class="menuBar"> 
    <div class="menuHeader ui-corner-top menuHeaderActive"> 
     <span><a href="#" onclick="Home()">Home</a></span> 
    </div> 
    <div class="menuHeader ui-corner-top"> 
     <span><a href="#" onclick="NewTransaction()">New Transaction</a></span> 
    </div> 
</div> 

Come posso risolvere questo problema?

function Home() { 
      window.location.href = "../../home/welcome"; 
     } 
     function NewTransaction() { 
      window.location.href = "../../EnergyCatagory/index"; 
     } 

Answer 1

Penso che potresti modificare i collegamenti ipertestuali per includere l'URL corretto. Quindi, in jQuery, prova l'URL corrente del browser rispetto all'URL dei collegamenti ipertestuali. Se è una corrispondenza, applica la tua classe menuHeaderActive.

$(document).ready(function() { 
    var currentUrl = window.location.href; 
    var menuLink = $('.menuHeader a[href="' + currentUrl + '"]'); 
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); 
}); 

Quando la pagina viene ricaricata dopo uno dei link del menu sono state cliccato il copione ho mostrato dovrebbe correre e $('.menuHeader a[href="' + currentUrl + '"]'); dovrebbe trovare il link del menu (hyperlink/a-tag) che corrisponde l'url l'utente navigato troppo . Quindi si tratta di trovare il contenitore div e aggiungere la classe.

Fondamentalmente non si aggiunge la classe css quando l'utente fa clic sul collegamento del menu; devi impostare la classe css dopo che la pagina è stata reindirizzata all'altra pagina. Quindi è l'altra pagina che deve impostare la classe CSS contro il link del menu attivo corretto. Ci sono centinaia di modi per farlo, ma in base a ciò che hai fornito agli URL corrispondenti è il più semplice.

Personalmente avrei ogni pagina registrare un id di pagina che corrisponde a uno dei collegamenti del menu. Qualcosa di simile ...

HTML

Nota l'attributo dati associati-page-id aggiunti ogni menuheader div

<div class="menuBar"> 
    <div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome"> 
     <span><a href="#" onclick="Home()">Home</a></span> 
    </div> 
    <div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index"> 
     <span><a href="#" onclick="NewTransaction()">New Transaction</a></span> 
    </div> 
</div> 

Javascript

Aggiunto a ogni pagina

documento gestore pronto per la pagina di benvenuto aka ../../home/welcome

$(document).ready(function() { 
    SetActiveMenuCssClass('home-welcome'); 
}); 

documento gestore pronto per la pagina di indice catagory energia alias ../../EnergyCatagory/index

$(document).ready(function() { 
    SetActiveMenuCssClass('energy-catagory-index'); 
}); 

funzione definiti a livello globale

function SetActiveMenuCssClass(pageId) { 
    // finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id 
    // then sets the active class 
    $('.menuHeader[data-associated-page-id="' + pageId + '"]') 
     .addClass('menuHeaderActive'); 
} 

Se si sta utilizzando un linguaggio lato server come PHP allora si potrebbe fare qualcosa di simile https://stackoverflow.com/a/11814284/81053

Answer 2

NOTA: la risposta fornita da Chris funziona molto bene, ma è necessario disporre del collegamento nello href di <a></a>, altrimenti sarà undefined.

Si potrebbe aggiungere un id-a con il link e quindi utilizzare

var menuLink = $('#'+currentUrl); 

• il codice fornito da Chris

(in questo modo la pagina non reindirizza in quanto si è fatto clic il collegamento ma eseguirà la funzione invece)

<div class="menuBar"> 
    <div class="menuHeader ui-corner-top menuHeaderActive"> 
     <span><a href="#" id="http://www.yourwebsite.url//home/welcome" onclick="Home()">Home</a></span> 
    </div> 
    <div class="menuHeader ui-corner-top"> 
     <span><a href="#" id="http://www.yourwebsite.url/EnergyCatagory/index" onclick="NewTransaction()">New Transaction</a></span> 
    </div> 
</div> 

E il JS

$(document).ready(function() { 
    var currentUrl = window.location.href; 
    var menuLink = $('#'+currentUrl); 
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive'); 
}); 

Una nota a parte, se questa è una pagina diversa è sufficiente aggiungere menuHeaderActive al attiva a e rimuoverlo dal l'altra in quella pagina specifica