jquery 导航插件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 纵向导航</title>
<style>
.nav { list-style: none; padding: 0; margin: 0; width: 200px; background-color: #f1f1f1; }
.nav li { padding: 10px; border-bottom: 1px solid #ccc; }
.nav li:hover { background-color: #ddd; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('.nav li').click(function() {
    alert('你点击了 ' + $(this).text());
  });
});
</script>
</head>
<body>
<ul class="nav">
  <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>
</body>
</html>