Jak podświetlić przycisk menu?

Question

Muszę podświetlić przycisk menu podczas wybierania elementu menu. jeśli wybiorę pozycję menu, wówczas należy zastosować bieżącą klasę do (li).

Oto, co próbowałem.

Oto HTML,

<ul> 
    <li class="current"><a href="#">HOME</a></li> 
    <li><a href="#">SERVICE</a></li> 
    <li><a href="#">ABOUTUS</a></li> 
    <li><a href="#">PROFILE</a></li> 
    <li><a href="#">CONTACTUS</a></li> 
    </ul> 

Oto Jquery,

var opener = { 
    init:function() { 
     this.menuselection(); 
    }, 
    menuselection:function(){ 
    $('ul li a').on('click', function(){ 
     $('ul li').addClass('current'); 
    }); 
    } 
} 
opener.init(); 

Oto CSS,

.current a { 
    color: #03c9a9; 
} 
a, 
a:active, 
a:focus { 
    color: #fff; 
} 
a, 
a:hover, 
a:active, 
a:focus { 
    outline: 0; 
    border: 0; 
    text-decoration: none; 
    color: #fff; 
} 

Demo

Answer 1

Zastosowanie $(this) dostać CU rrent elementem i closest('li') uzyskać li

var opener = { 
    init:function() { 
     this.menuselection(); 
    }, 
    menuselection:function(){ 
    $('ul li a').on('click', function(){ 
     $(this).closest('li').addClass('current'); 
    }); 
    } 
} 

Inaczej $('ul li') doda klasy do wszystkieli elementy

Aktualizacja

gdybym wybrać $ ('ul li'), a następnie zastosuj bieżącą klasę, a następnie muszę usunąć wszystkie pozostałe bieżące klasy, jeśli są stosowane z innych znaczników li.

Przed dodaniem klasę $(this).closest('li'), zrobić

$('ul li').removeClass('current'); 

Answer 2

Można użyć this.

$('ul li a').on('click', function(){ 
     $(this).addClass('current'); 
    }); 

Aktualizacja
aby usunąć wszystkie pozostałe klasy aktualny jeśli stosowane z innymi znacznikami li

$('ul li a').on('click', function(){ 
    $('ul li').removeClass('current'); 
    $(this).addClass('current'); 
} 

Answer 3

Fiddle: http://jsfiddle.net/9bzc9j2q/3/

Musisz usunąć 'aktualny' klasę ze wszystkich li i dodaj klasę tylko do elementu nadrzędnego klikniętego elementu.

$('ul li a').on('click', function(){ 
     $('ul li').removeClass('current'); 
     $(this).parent().addClass('current'); 
    }); 

Answer 4

Użyj tego, mała korekta w prev komentarzu

$('ul li a').on('click', function(){ 
 
     $('ul li a').removeClass('current'); 
 
     $(this).addClass('current'); 
 
    });

Answer 5

Dodać kilka zmian w skrypcie, usunąć bieżącej klasy od wszystkich innych li tagów i kliknięcia a elementu dodaj bieżącą klasę do najbliższej li.

var opener = { 
    init:function() {   
     this.menuselection(); 
    }, 
    menuselection:function(){ 

    $('ul li a').on('mouseup', function(){ 
     $("li.current").removeClass("current"); 
     $(this).closest("li").addClass('current'); 
    }); 
    }  
} 
opener.init(); 

A z Twojego CSS usuń kolor ze swoich tagów.

CSS:

.current a { 
    color: #03c9a9; 
} 
a, 
a:hover, 
a:active, 
a:focus { 
    outline: 0; 
    border: 0; 
    text-decoration: none; 
} 
.li-logo { 
    text-align: left; 
} 

DEMO