Jak zastosować CSS do menu podczas wybierania?

Question

Mam zadanie podświetlić menu wybrane podczas ładowania strony. W tym celu mam następujący kod:

$('.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'); 
}); 

Ale po wybraniu drugiego menu odświeżono go i brakowało zaznaczenia.

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> 

Jak mogę rozwiązać ten problem?

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

Answer 1

Myślę, że możesz poprawić swoje hiperłącza, aby dołączyć poprawny adres URL. Następnie w teście jQuery przetestuj aktualny adres URL przeglądarek pod adresem URL linków - jeśli jest zgodny, zastosuj klasę menuHeaderActive.

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

Kiedy ładuje stronę po jednym z linków menu zostały kliknięciu skrypt mam pokazany zostanie uruchomiony i $('.menuHeader a[href="' + currentUrl + '"]'); powinny znaleźć link menu (hiperłącze/a-tag), który pasuje do URL użytkownik żeglował zbyt . Następnie należy znaleźć kontener div i dodać swoją klasę.

Zasadniczo nie dodaje się klasy css, gdy użytkownik kliknie link menu; musisz ustawić klasę css po przekierowaniu strony na drugą stronę. Jest to więc druga strona, która musi ustawić klasę css na poprawne aktywne łącze menu. Jest na to 100 sposobów, ale najprostsze są oparte na dostarczonych adresach URL.

Osobiście chciałbym, aby każda strona rejestrowała identyfikator strony odpowiadający jednemu z linków menu. Coś takiego ...

HTML

Uwaga atrybut dane związane z-page-id dodano do każdej 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

Dodano do każda strona

dokument gotowy do obsługi strony powitalnej aka ../../home/welcome

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

dokument gotowy obsługi dla kategorii pięciogwiazdkowy strony indeksu energia AKA ../../EnergyCatagory/index

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

funkcji zdefiniowane globalnie

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'); 
} 

Jeśli były przy użyciu języka PHP po stronie serwera, jak to można zrobić coś takiego https://stackoverflow.com/a/11814284/81053

Answer 2

UWAGA: Odpowiedź udzielona przez Chris działa naprawdę dobrze, ale musisz mieć link w href z <a></a>, w przeciwnym razie będzie to undefined.

Można dodać id do a z linkiem, a następnie użyć

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

• kodu podanego przez Chris

(w ten sposób strona nie będzie przekierować ponieważ kliknąłeś odnośnik link, ale uruchomi tę funkcję)

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

I JS

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

Na marginesie, jeśli to inna strona trzeba tylko dodać menuHeaderActive do aktywnego a i usunąć go z drugiej strony na tej konkretnej stronie