首页jquery一级导航栏

jquery一级导航栏

时间: 2023-12-30 07:24:15 浏览: 75

以下是一个简单的示例，演示如何使用jQuery创建一个一级导航栏： ```html <!DOCTYPE html> <html> <head> <title>jQuery一级导航栏示例</title> <style> /* 样式可以根据需要进行自定义 */ ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 10px; } a { text-decoration: none; color: #000; padding: 5px; background-color: #ccc; } a:hover { background-color: #aaa; } </style> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { // 给导航栏的每个链接添加点击事件 $('ul li a').click(function() { // 在控制台输出被点击的链接的文本内容 console.log($(this).text()); }); }); </script> </head> <body> <ul> <li><a href="#">导航项1</a></li> <li><a href="#">导航项2</a></li> <li><a href="#">导航项3</a></li> <li><a href="#">导航项4</a></li> </ul> </body> </html> ``` 这个示例中，我们使用了jQuery库来简化JavaScript代码的编写。通过`$(document).ready()`函数，我们确保在文档加载完成后执行代码。然后，我们给导航栏的每个链接添加了一个点击事件，当链接被点击时，在控制台输出被点击的链接的文本内容。

阅读全文