2-table栏切换

最新推荐文章于 2024-01-02 18:58:23 发布

原创最新推荐文章于 2024-01-02 18:58:23 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

前端小案例专栏收录该内容

2 篇文章

订阅专栏

该代码示例展示了如何通过CSS定义HTML结构的样式，创建一个导航栏，并用JavaScript（DOM操作和jQuery）实现在鼠标悬停时切换对应的内容区域显示。方法一是纯DOM操作，通过监听鼠标进入事件来切换内容模块的显示状态；方法二是利用jQuery选择器和事件处理简化这一过程。

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

<style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;

        }

        .tableLan {
            width: 670px;
            margin: 100px auto 0;
        }

        .table {
            display: flex;
            justify-content: space-between;
        }

        .table li {
            flex: 1;
            background-color: #EDEDED;
            text-align: center;
        }

        .table li>a {
            font-size: 20px;
            color: black;
        }

        .table li:hover {
            background-color: #C31723;
        }

        .table li:hover a {
            color: white;
        }

        .table-content .item {
            display: none;
            width: 100%;
            height: 200px;
            background-color: aquamarine;
        }

        .active {
            display: block !important;
        }
    </style>
</head>

<body>
    <div class="tableLan">
        <ul class="table">
            <li>
                <a href="#">商品介绍</a>
            </li>
            <li>
                <a href="#">规格与包装</a>
            </li>
            <li>
                <a href="#">售后保障</a>
            </li>
            <li>
                <a href="#">商品评价</a>
            </li>
            <li>
                <a href="#">手机社区</a>
            </li>
        </ul>
        <div class="table-content">
            <div class="item active">商品介绍模块</div>
            <div class="item">规格与包装模块</div>
            <div class="item">售后保障模块</div>
            <div class="item">商品评价模块</div>
            <div class="item"> 手机社区模块</div>
        </div>
    </div>
</body>

运行效果：
在这里插入图片描述

方法1：dom实现切换

// 1.获取变量元素
const lis = document.querySelectorAll('.tableLan .table li');
const items = document.querySelectorAll('.tableLan .table-content .item')
// 2.给上面的nav绑定鼠标滑动事件
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseenter', function () {
        console.log(i); //0 1 2 3 4 
        document.querySelector('.table-content  .active').classList.remove('active');
        items[i].classList.add('active');
    })
}

在这里插入图片描述

方法2：jquery实现切换

$('.table li').mouseenter(function () {
    // 1.获取鼠标经过的导航栏下标
    const num = $(this).index();
    // 2.让内容框 下标对应的盒子显示出来
    $('.table-content div').eq(num).show();
    // 3.让其他兄弟盒子都隐藏
    $('.table-content div').eq(num).siblings().hide();
})