添加基於url的類並在鼠標懸停時移除

Question

有沒有更有效的方法來做到這一點？基本上只需要添加一個類到subNav菜單，如果用戶在該頁面上。當他們懸停在菜單上時，選定的課程將消失。但是，如果他們從菜單中彈出，我需要選中的班級重新出現。必須有一個更有效的方式來做到這一點...

對不起，我沒有包含html。你可以在這裏看到它的行動：http://oursaviorschurch.com/GivingNew。我正在用asp.net進行開發。

$(function() { 
    var loc = window.location.href; // returns the full URL 
    if (/GivingNew/.test(loc)) { 
     $('.SideGrace').addClass('selected'); 
    }; 
    if (/Options/.test(loc)) { 
     $('.SideOptions').addClass('selected'); 
    }; 
    if (/FAQ/.test(loc)) { 
     $('.SideFAQ').addClass('selected'); 
    }; 
    if (/GiveNow/.test(loc)) { 
     $('.SideGive').addClass('selected'); 
    }; 
    $('.sideNav').mouseover(function() { 
     $('.sideNav li a').removeClass('selected'); 
    }); 
    $('.sideNav').mouseout(function() { 
     var loc = window.location.href; // returns the full URL 
     if (/GivingNew/.test(loc)) { 
      $('.SideGrace').addClass('selected'); 
     }; 
     if (/Options/.test(loc)) { 
      $('.SideOptions').addClass('selected'); 
     }; 
     if (/FAQ/.test(loc)) { 
      $('.SideFAQ').addClass('selected'); 
     }; 
     if (/GiveNow/.test(loc)) { 
      $('.SideGive').addClass('selected'); 
     }; 
    }); 
}); 

Answer 1

如果我理解正確你的問題，我會做的是「選擇」標記添加到與PHP當前頁和公正的花式/使用jQuery和CSS效果。

我想象的是，當您將鼠標懸停在當前頁面的鏈接上時，會顯示「您已經在這裏！」之類的內容。在這種情況下，使用PHP來打印'selected'類似乎更合乎邏輯，而其餘部分將很容易。另外，因爲你總是測試你的'loc'var「test（loc）」，而不是使用多個if，你可以使用'switch'。

Answer 2

根據你，做你想做以下...

當他們將鼠標懸停在菜單中，選擇類消失。但如果它們從菜單中彈出，我需要選中的類重新出現。

爲什麼不在用戶關注菜單時添加了selected並在focusout上刪除它？

你可以這樣做：
檢查toggleClass。

$(function() { 

    $('.sideNav').on('mouseout mouseover', function() { 
     $(this).toggleClass('selected'); 
    }); 

}); 

Example

Answer 3

假設加價類似以下內容：

<ul> 
    <li><a class="menuLinks" href="http://example.com/home/">Home</a></li> 
    <li><a class="menuLinks" href="http://example.com/about/">About</a></li> 
    <li><a class="menuLinks" href="http://example.com/contact/">Contact</a></li> 
    <li><a class="menuLinks" href="http://example.com/options/">Options</a></li> 
</ul>​ 

請注意，我在a元素使用特定class指定這些，我想通過搜索，並且也我正在使用a元素的文本來搜索window.location字符串，這可能需要根據您自己的標記和邏輯進行調整。

以下jQuery的原理，根據這些假設：

var loc = 'http://www.example.com/options/'; 

$('a.menuLinks').each(

function() { 
    var needle = $(this).text().toLowerCase().split(/ /)[0]; 
    if (loc.indexOf(needle) > -1) { 
     $(this).addClass('selected'); 
     $(this).attr('data-selected',true); 
    } 
}).closest('ul').on('mouseenter mouseleave', function(e) { 
    if (e.type == 'mouseenter') { 
     $(this).find('.selected').removeClass('selected'); 
    } else if (e.type == 'mouseleave') { 
     $(this).find('a[data-selected]').addClass('selected'); 
    } 
});​ 

JS Fiddle demo。

參考文獻：

• 的jQuery：
  • addClass()。
  • attr()。
  • has-attribute-selector [attribute]。
  • each()。
  • find()。
  • on()。
  • removeClass()。
  • text()。
• 的JavaScript：
  • e.type。
  • indexOf()。
  • split()。
  • toLowerCase()。