jquery突出顯示菜單

我有這個腳本突出顯示導航菜單點擊後，但點擊後選定的類消失。點擊後有沒有一種解決方法可以讓選定的類生效？jquery突出顯示菜單

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#nav ul li a').click(function() { 
     $('#nav ul li').removeClass('selected'); 
     $(this).parent('li').addClass('selected'); 
     alert('hello'); 
    }); 
}); 

</script> 
    <div id="nav"> 
     <ul>  
      <li><a href="/">Home</a></li> 
      <li><a href="/blog/">Blog</a></li> 
      <li><a href="/about/">About</a></li> 
     </ul> 
    </div>

來源

2011-01-31 Ronnie Beltran

你的代碼在我看來應該可以工作。你能提供更多信息嗎？ – Matt 2011-01-31 12:53:14

從上面的腳本我故意把警報（'你好'）來測試點擊li實際上添加了選定的類，這是問題是，我點擊確定後警告框（功能出口）和突出顯示李（風格）消失。用'return false'代替警報（'hello'）使突出顯示有效，但轉到下一頁不再工作，因爲@gearsdigital指出 – 2011-01-31 13:45:12

如果我理解正確的話。例：http://jsfiddle.net/jgmgW/

$(document).ready(function() { 
    $('#nav ul li').click(function() { 
     $('#nav ul').children('li').removeClass(); 
     $(this).addClass('selected'); 
    }); 
}); 

#nav .selected a{background:red;display:block} 

<div id="nav"> 
    <ul>  
     <li><a href="#">Home</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
</div>

來源

2011-01-31 12:33:13 gearsdigital

可以使用.siblings方法來獲得，因爲他們selected類li元素。

$(document).ready(function() { 
    $("#nav ul li a").click(function() { 
     $(this).parent("li") 
      .addClass("selected") 
      .siblings(".selected") 
       .removeClass("selected"); 
     return false; 
    }); 
});

您可以在jsFiddle上看到此操作。

來源

2011-01-31 12:36:07 mekwall

jquery突出顯示菜單

回答

相關問題