首页创建一个HTML页面，使用<script>标记直接引入jQuery文件，定义一组无序列表，设置CSS样式，实现列表项从左到右导航条效果；定义一个样式类current,设置背景色为灰色；使用jQuery获取li元素，并通过on()方法为mouseover()、mouseout()事件绑定相同的事件处理函数，为当前li元素应用toggleClass()方法添加或移除current类，实现鼠标移到该某个列表项上背景色为灰色，鼠标从该列表项移出时移除背景色。

创建一个HTML页面，使用<script>标记直接引入jQuery文件，定义一组无序列表，设置CSS样式，实现列表项从左到右导航条效果；定义一个样式类current,设置背景色为灰色；使用jQuery获取li元素，并通过on()方法为mouseover()、mouseout()事件绑定相同的事件处理函数，为当前li元素应用toggleClass()方法添加或移除current类，实现鼠标移到该某个列表项上背景色为灰色，鼠标从该列表项移出时移除背景色。

时间: 2024-02-12 20:09:36 浏览: 131

好的，我理解了你的问题。以下是实现所需的HTML和jQuery代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <style> ul { list-style: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li.current { background-color: gray; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('ul li').on('mouseover mouseout', function() { $(this).toggleClass('current'); }); }); </script> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> </ul> </body> </html> ``` 这段代码实现了一个简单的导航条，通过jQuery的on()方法为li元素的mouseover和mouseout事件绑定相同的事件处理函数，实现鼠标移上去后背景色变为灰色，移出后背景色恢复为原来的颜色。同时，使用toggleClass()方法添加或移除current类，实现背景色的变化。

阅读全文