Menü düğmesi nasıl seçilir?

Question

Menü öğesini seçerken menü düğmesine basmam gerekiyor. eğer menü öğesini seçersem o zaman geçerli sınıfı (li) uygulamanız gerekir.

Denediğim şey budur. İşte

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

CSS

İşte

HTML, İşte

<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 olduğunu,

.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

Kullanım $(this) cu almak rrent eleman ve closest('li') i $ ('ul li' nı seçerseniz $('ul li') tümli elemanları için

Güncelleme

sınıf katacak, Aksi li

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

olsun), o zaman geçerli sınıfı uygulayın, diğer li etiketlerinden uygulandığında diğer tüm mevcut sınıfı kaldırmam gerekiyor. Sen this kullanabilirsiniz

$(this).closest('li') için sınıf eklemeden önce,

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

Answer 2

yapmak.

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

diğer li etiketleri

uygulanan eğer
tüm diğer cari sınıfını kaldırmak için Güncelleştirme

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

Answer 3

Fiddle: Tüm gelen 'geçerli' sınıf kaldırmak gerekir http://jsfiddle.net/9bzc9j2q/3/

lı ve sınıfı yalnızca tıklanan öğenin ebeveyine ekler.

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

Answer 4

Kullanım

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

Answer 5

komut dosyanızda birkaç değişiklik yapın önceki yorumunda bu küçük düzeltme, tüm diğer li etiketleri gelen ve a elemanın tıklama sınıf akımını kesmek Geçerli sınıfı en yakın li'a ekleyin.

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(); 

Ve CSS'nizden, bir etiketinizdeki rengi kaldırın.

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