jQuery实现选项卡嵌套

星屿H

于 2021-09-07 15:42:20 发布

阅读量447

点赞数 3

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_48294048/article/details/120157290

版权

该示例展示了如何使用HTML、CSS和JavaScript创建一个交互式菜单系统。当用户鼠标悬停在左侧菜单的li元素上时，对应右侧的内容区域会显示相应的div，并更新顶部的标签为所选菜单的内容。同时，底部菜单的a元素被选中时，其内容也会同步到顶部标签。这个功能常用于导航和内容展示，提高了用户体验。

摘要由CSDN通过智能技术生成

描述：

1.划上底部a的每一个菜单让顶部的标签span的内容变成对应的a的内容

2.划上左边的li 切换到右侧对应的div

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        .wrap {
            width: 800px;
            height: 400px;
            border: 2px solid blue;
            margin: 20px auto;
            display: flex;
        }

        .wrap>ul {
            width: 150px;
            height: 100%;
        }

        .wrap>ul li {
            height: 100px;
            background: red;