如何使用 JQuery 实现点击和悬停时更改 li 元素的样式，并保持默认选中第一个 li 状态？-js教程-PHP中文网

如何使用 JQuery 实现点击和悬停时更改 li 元素的样式，并保持默认选中第一个 li 状态？

DDD

发布： 2024-10-31 17:42:15

原创

676人浏览过

如何使用 jquery 实现点击和悬停时更改 li 元素的样式，并保持默认选中第一个 li 状态？

jquery 代码更改

点击 li 时，要求其背景色更改为蓝色，图标变为白色。当鼠标悬停在某个 li 上，li 的背景色和图标也应变为白色。默认情况下，第一个 li 处于选中状态。点击其他 li 时，先前被选中的 li 应恢复为默认状态。

css 代码：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

.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 状态？的详细内容，更多请关注php中文网其它相关文章！