Как выделить кнопку меню?

Question

Мне нужно выделить кнопку меню при выборе пункта меню. если я выбираю пункт меню, тогда необходимо применить текущий класс к (li).

Это то, что я пробовал.

Вот 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> 

Вот Jquery,

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

Вот 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

Используйте $(this), чтобы получить куб ко в ой то элемент и closest('li') получить li

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

В противном случае $('ul li') добавит класс всеli элементы

Update

если я выбираю $ ('уль LI'), затем применить текущий класс, тогда мне нужно удалить все остальные текущие классы, если они применяются с другими тегами li.

Перед добавлением класс $(this).closest('li'), сделать

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

Answer 2

Вы можете использовать this.

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

Update
Чтобы удалить все остальные текущего класса, если применяется с другими Li теги

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

Answer 3

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

Вы должны удалить 'текущий' класс из всех li и добавить класс только к родительскому элементу щелкнутого элемента.

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

Answer 4

Используйте это, небольшой коррекция предыдущей комментарий

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

Answer 5

сделать несколько изменений в вашем скрипте, удалить класс ток от всех других li тегов и щелчок a элемента добавьте текущий класс к ближайшему 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(); 

И из вашего CSS удалите цвет из ваших тегов.

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