保持當前導航按鈕處於活動狀態

Question

我的導航菜單中有一個按鈕的以下代碼：

div onmouseover=\"changeBGColor(this,'#b90707');changeColor(this,'#fff');\" onmouseout=\"changeBGColor(this,'');changeColor(this,'#333');\" onClick="" class='navbtn'>Entry /div

下面的代碼使元素保持活動狀態：

  $('.navbtn').each(function(){
    var path = window.location.href;
    var current = path.substring(path.lastIndexOf('/')+1);
    var url = $(this).attr('onClick').substring(path.lastIndexOf('/')+18,$(this).attr('onClick').length-1);

    if(url == current ){
        changeBGColor(this,'#b90707');changeColor(this,'#fff');
        $(this).onmouseout = '';
        $(this).onmouseover= '';
    };
});       

該元素保持活動狀態，直到我將鼠標移到該元素上為止。 無論何時將鼠標移至何處，我都希望保持活躍狀態​​。

Answer 1

該代碼似乎正在onmouseout處理程序中更改背景顏色。 如果這將顏色恢復為原來的顏色，請嘗試不處理該事件以查看其是否保持不變。

編輯：將處理程序設置為空字符串看起來不正確。 請參閱在jQuery中刪除事件處理程序的最佳方法？

編輯：

這樣的事情可能會更好：

$(this).unbind('mouseleave'); 

或者（根據以上鏈接，這是首選方法）：

$(this).off('mouseleave'); 

編輯：

為此，您將需要刪除為onmouseover和onmouseout設置的內聯處理程序。 原因是$(this).off('mouseleave'); 除非事件通過jQuery和$(this).onmouseover= '';連接起來，否則它將無法正常工作$(this).onmouseover= ''; 出於相同的原因也不會工作。

然后，您需要使用一些jQuery連接事件處理程序：

$('.navbtn').mouseover(function () {
    changeBGColor(this,'#b90707'); 
});

$('.navbtn').mouseout(function () {
    changeBGColor(this, '');
});

現在您正在做什么：

if(url == current ){ 
    changeBGColor(this,'#b90707');changeColor(this,'#fff'); 
    $(this).onmouseout = ''; 
    $(this).onmouseover= ''; 
}; 

您可以改為：

if(url == current ){ 
    changeBGColor(this,'#b90707');changeColor(this,'#fff'); 
    $('.navbtn').off('mouseout');
    $('.navbtn').off('mouseover'); 
}; 

這應該確保您剛剛設置的顏色保持不變。

請注意，要使off語法起作用，需要jQuery 1.7+。