一段代码解读
发布时间： 2025/11/23 17:49:17
分布者： 菜鸟开源技术交流
阅读次数： 174
最后更新： 2026/1/3 17:52:27
<script type="text/javascript">
// 选择所有标签项元素，存储在$div_li变量中
var $div_li = $(".ucenter-tab-box ul li");
// 为所有标签项绑定点击和悬停事件
$div_li.click(function () {
// 点击事件处理：
// 1. 为当前点击的标签项添加"current"类（激活状态）
$(this).addClass("current")
// 2. 移除兄弟元素的"current"类（取消其他标签的激活状态）
.siblings().removeClass("current");
// 获取当前点击标签项在所有标签项中的索引位置
var div_index = $div_li.index(this);
// 根据索引显示对应的内容区域：
// 1. 显示索引对应的内容区域
$("#tab_box>div").eq(div_index).show()
// 2. 隐藏其他兄弟内容区域
.siblings().hide();
}).hover(function () {
// 鼠标悬停进入事件：为当前元素添加"hover"类
$(this).addClass("hover");
}, function () {
// 鼠标悬停离开事件：移除当前元素的"hover"类
$(this).removeClass("hover");
});
</script>
