jquery 代码更改
点击 li 时，要求其背景色更改为蓝色，图标变为白色。当鼠标悬停在某个 li 上，li 的背景色和图标也应变为白色。默认情况下，第一个 li 处于选中状态。点击其他 li 时，先前被选中的 li 应恢复为默认状态。
css 代码：
.ser_box { width: 100%; height: 100%; overflow-y: auto;}.ser_header { width: 100%; height: 90px;}.ser_headc { width: 85%; height: 90px; margin: 0 auto;}.ser_left { width: 20%; height: 90px; float: left;}.ser_center { width: 60%; height: 90px; float: left; border-bottom: 1px solid #c4dbed;}.ser_right { width: 19%; height: 90px; float: left; text-align: right; font-size: 12px;}.ser_menu { width: 20px; vertical-align: middle;}.ser_text { vertical-align: middle;}.ser_ul { list-style: none; overflow: hidden; margin: 0 auto; width: 100%;}.ser_ul li { float: left; height: 40px; line-height: 40px; border: 1px solid #c4dbed; border-bottom: none; text-align: center;}.ser_li { width: 12%;}.ser_li_speical { width: 14%;}.ser_focus { background-color: #557fb9;}
jquery 代码：
$(function() { $(".ser_ul li").first().addClass("ser_focus"); // 默认选中第一个 li // 点击 li 时更改样式 $(".ser_ul li").click(function() { $(".ser_ul li").removeClass("ser_focus"); // 移除所有 li 的选中状态 $(this).addClass("ser_focus"); // 为被点击的 li 添加选中状态 }); // 鼠标悬停在 li 上时更改样式 $(".ser_ul li").hover(function() { $(this).addClass("ser_focus"); // 添加选中状态 }, function() { $(this).removeClass("ser_focus"); // 移除选中状态 });});
以上就是如何使用 JQuery 实现点击和悬停时更改 li 元素的样式，并保持默认选中第一个 li 状态？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494962.html
微信扫一扫 
支付宝扫一扫 
