我還是 jquery 的新手，這是我目前面臨的問題。我想要做的是將懸停和點擊事件放在網頁選單上，懸停事件完美運行但點擊事件不起作用。我應該在哪里修？另外，是否可以結合懸停和單擊事件來縮短代碼？預先感謝您的幫助。
這是我的代碼：
$(document).ready(function() {
$(".navi li a:first").addClass("active");
$(".navi li a").hover(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
$(".navi li a").click(function() {
$(".navi li a").removeClass("active");
$(this).addClass("active");
});
}); //end.navi>li a.active {
color: #0a2a43;
background-color: rgba(255, 255, 255, 0.8);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="navi">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--navi-->
</nav>uj5u.com熱心網友回復：
你不需要在你的 jQuery 中處理“懸停”，讓 CSS 的力量做到這一點
我還改進了您的 jQuery，因此您不會一次又一次地獲取元素集合……并更改了 CSS，以便在使用.activeor時更加明顯:hover。
此外，您可以有效地.active在 HTML和jQuery 中的第一個元素上設定...... 無需同時執行這兩項操作，因此在本示例中，我洗掉了 HTML 屬性。
// Simpler "ready" format
$(function() {
// Get all the elements once
var $a = $(".navi li a");
// Set the first one to "active"
$a.first().addClass("active");
// Click event
$a.on("click", function(e) {
// Stop navigation
e.preventDefault();
// Remove from all
$a.removeClass("active");
// Add to clicked
$(this).addClass("active");
});
}); //end.navi>li a.active,
.navi>li a:hover{
color: red;
background-color: rgba(0, 0, 0, 0.8);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="navi">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--navi-->
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339759.html
標籤：查询