2012-04-27 81 views

回答

0

你可以選擇使用:

active = $(selector) 
    .parent('li') 
    .children('a') 
    .addClass('active'); 
5

也許這樣的事情會起作用嗎?

active = $(selector) 
     .parent('li') 
     .find('a') 
     .addClass('active') 
+0

我只是嘗試它 - 它似乎工作。當更新時,我檢查了螢火蟲,活動課只在第一個'li'上設置,不在'li a'上。並沒有改變。 – 2012-04-27 13:29:47

+0

這是因爲它只被應用於選擇器的父li元素,如同編碼一樣。 – Dutchie432 2012-04-27 14:14:59

+0

那我怎麼才能把它定位到李? – 2012-04-27 19:28:48

0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.MenuLList').find('a.Testing').hover(function() { $(this).addClass('Active'); }, function() { $(this).removeClass('Active'); }); 
     }); 
    </script> 
    <style type="text/css"> 
     .MenuLList 
     { 
      list-style: none; 
     } 

     .MenuLList li 
     { 
      margin: 5px 0px; 
     } 

     .MenuLList li a 
     { 
      text-decoration: none; 
     } 

     .Inactive 
     { 
      color: Red; 
      width: 100px; 
      background-color: Yellow; 
     } 

     .Active 
     { 
      font-weight: bolder; 
      color: Green; 
      width: 300px; 
      background-color: Lime; 
      padding-left: 30px; 
     } 
    </style> 
</head> 
<body> 
    <ul class="MenuLList"> 
     <li><a class="Inactive" href="#">Test 1</a></li> 
     <li><a class="Testing Inactive" href="#">Test 2</a> </li> 
     <li><a class="Testing Inactive" href="#">Test 3</a> </li> 
     <li><a class="Testing Inactive" href="#">Test 4</a> </li> 
    </ul> 
</body> 
</html> 
+0

現場演示請參閱此鏈接:http://jsfiddle.net/nanoquantumtech/dw9u7/ – Thulasiram 2012-04-28 06:45:29

+0

  • Test 1
  • 沒有測試css類。所以懸停效果不會發生。 – Thulasiram 2012-04-28 06:50:26