咨询一段js代码的功能

发布网友 发布时间：2022-04-29 01:41

我来回答

共3个回答

热心网友 时间：2022-05-15 15:33

这是一个菜单切换功能的JS，就是有一排菜单，鼠标放上去的时候，实现这个菜单项高亮，并把子菜单显示出来。

$(function() {
//公告&促销切换
// 注册鼠标事件
$(".indexTabNewNav li").mouseover(function(){

var newNum = $(".indexTabNewNav li").index($(this)); // 取当前鼠标指向的菜单项
$(".indexTabNewNav li").removeClass("on"); // 取消所有菜单项目高亮状态
$(this).addClass("on"); // 对鼠标指向的当前菜单项目加高亮
$(".indexTabNewCon .indexTabNewList").hide(); // 隐藏所有子菜单
$(".indexTabNewCon .indexTabNewList").eq(newNum).show(); /// 把鼠标指向的菜单的子菜单显示出来
})

当然这段代码是有对应的HTML及css结合的。

热心网友 时间：2022-05-15 16:51

//为所有class = index 下的TabNewNav标签下的li标签添加鼠标移过事件
$(".indexTabNewNav li").mouseover(function(){
//newNum为本次触发的元素的index
var newNum = $(".indexTabNewNav li").index($(this));
//移除所有class = index 下的TabNewNav标签下的li标签 的 on class
$(".indexTabNewNav li").removeClass("on");
// 为本次触发的元素添加 on class
$(this).addClass("on");
//隐藏所有 class =index 下的 TabNewCon TabNewList 标签$(".indexTabNewCon .indexTabNewList").hide();
// 显示 class =index 下的第 newNum个TabNewCon TabNewList 标签
$(".indexTabNewCon .indexTabNewList").eq(newNum).show();
})

热心网友 时间：2022-05-15 18:26

//这段代码需要应用jquery，里面用的全是jquery的方法
$(function() {//jquery的加载完成函数，和js的window.onload好像有区别，具体的可以到网上查证
//公告&促销切换
$(".indexTabNewNav li").mouseover(function(){//给class为indexTabNewNav  下面的li加上鼠标经过事件
var newNum = $(".indexTabNewNav li").index($(this)); //获取当前的li的index，就是第几个li
$(".indexTabNewNav li").removeClass("on");//把class移除
$(this).addClass("on");//加上class
$(".indexTabNewCon .indexTabNewList").hide();//隐藏$(".indexTabNewCon .indexTabNewList")这个元素
  $(".indexTabNewCon .indexTabNewList").eq(newNum).show(); //显示
})