如何突出顯示菜單按鈕？

選擇菜單項時，我需要突出顯示菜單按鈕。如果我選擇菜單項，則需要將當前類應用到（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

來源

2015-06-19 Prasanga

使用$(this)得到銅rrent元素和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元素

更新

如果我選擇$（ 'UL禮' ），然後應用當前類，然後我需要刪除所有其他當前類，如果從其他li標籤應用。

之前添加類$(this).closest('li')，做

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

來源

2015-06-19 04:59:26 AmmarCSE

感謝您的意見，如果我選擇$（ 'UL禮'），然後應用當前類的話，我需要的，如果從用於去除所有其他當前類其他鋰標籤。 – Prasanga

它工作正常，非常感謝 – Prasanga

@Prasanga，不要忘了標記你認爲有用的答案 – AmmarCSE

您可以使用this。

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

更新
要如果從其它李標籤
應用於去除所有其他當前類

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

來源

2015-06-19 05:00:07

小提琴：http://jsfiddle.net/9bzc9j2q/3/

你需要從所有刪除 '當前' 類並且只將該類添加到被單擊項目的父級。

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

來源

2015-06-19 05:04:38 gopalraju

利用這一點，在上一個註釋小幅盤整

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

來源

2015-06-19 05:04:55

非常感謝你的支持...... – Prasanga

請在您的腳本一些變化，從所有其他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

來源

2015-06-19 05:14:53

如何突出顯示菜單按鈕？

回答

相關問題