jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。水平菜单是一种常见的网页导航元素,通常水平排列在页面顶部,用于快速访问网站的不同部分。
以下是一个简单的 jQuery 水平菜单示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Horizontal Menu</title>
<style>
.menu {
list-style: none;
padding: 0;
margin: 0;
background-color: #f1f1f1;
display: flex;
}
.menu li {
padding: 10px;
}
.menu li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.menu li').hover(
function() {
$(this).css('background-color', '#ddd');
},
function() {
$(this).css('background-color', '#f1f1f1');
}
);
});
</script>
</body>
</html>
$(document).ready()
中。fadeIn()
, slideUp()
)正确使用。通过以上示例和解决方法,你应该能够创建一个基本的 jQuery 水平菜单,并解决一些常见问题。
没有搜到相关的文章