原生JS鼠标悬浮延迟切换选项卡（下拉菜单式 Tab）
  • 分享到微信朋友圈
    X
立即下载 查看演示

这是一个鼠标悬浮延迟切换选项卡（下拉菜单式 Tab） 的原生 JS 代码，不用 jQuery，核心效果：鼠标放到标题上，等 200 毫秒才切换下方对应的内容面板，快速划过不会乱跳。

一、HTML结构

  • .w1200：外层容器，一般是宽度1200px的版心

  • <ul><li>：菜单标题，两个选项

    • id="li1" / li2：给JS用来找到这个标签

    • onmouseover="MenuShow(1)"：鼠标悬浮事件，鼠标放上来就执行 MenuShow，并传编号1/2

    • class="active"：激活样式标记，用来CSS高亮当前选中标题

  • .box：内容容器

    • .exp 是每个内容面板，exp1 对应标题一，exp2对应标题二

二、JS变量跟函数

  • var time;：全局变量，用来存定时器的编号，是延时效果的关键

  • setTimeout(回调,200)：延时函数，等待200毫秒后执行里面代码，单位毫秒

  • MenuShow(id)：鼠标悬浮li的时候触发，延迟200ms再去切换内容，防抖思路，快速来回划过菜单，不会立刻切换，防止闪烁，下拉导航最常用

  • Show(id) 真正切换的核心函数

    • 循环 i=1、2

    • 获取 li+i 标题、exp+i 内容面板

    • 如果循环编号等于传进来的id：给li加上active高亮，内容面板 display:block 显示

    • 其他：去掉active，内容面板 display:none 隐藏