用JavaScript实现tab切换（选项卡）_::before 切换tab 滑动-优快云博客

本文介绍了如何使用JavaScript实现选项卡切换效果。当鼠标在顶部菜单栏滑动时，下方内容会相应动态改变，专注于红框部分的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示
在这里插入图片描述
当鼠标在顶部菜单栏滑动时下方内容会发生改变
注意：本文只以改变红框部分为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     *{ margin: 0; padding: 0; list-style: none; font-size: 12px; font-family: '宋体';}
     a{ text-decoration: none;}
     img{ display: block}
     .box{ width: 360px; margin: 30px auto;}
        .nav{ width: 358px; height: 34px; background: #f8f8f8; border: 1px solid #dbdee1;}
        .nav li{ float: left; padding: 0 10px; font-size: 16px; cursor: pointer; line-height: 34px; font-family: "微软雅黑";}
        .nav .active{ background: #fff; border-left:1px solid #dbdee1; border-right:1px solid #dbdee1; border-bottom: 1px #fff solid; border-top:3px solid #ff8400; line-height: 32px; height: 32px; position: relative; top: -1px; }
        .content{ margin-top:2px; }
        .content>div{ display: none;}
        .content>div>p{ height: 28px; line-height: 28px; margin-bottom: 4px;}
        .content>div>p>a{ color: #666;}
        dl{ height: 101px;}
        dt{ float: left; width: 105px;