tab切换二-优快云博客

本文链接：https://blog.youkuaiyun.com/jjlkjjlk/article/details/136129028

本文介绍了如何在HTML和CSS的基础上，利用JavaScript实现在鼠标移动时动态切换tab，对应的商品内容页面也随之改变，通过DOM操作和事件监听实现效果。

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

参考文章：

使用鼠标移动到对应的标题会实现对应的商品内容页面的切换。对上一篇tab切换文章html和css基础上进行了改动，实现效果差不多。

html代码:

<div class="tab">
        <div class="tab-head">
            <h3>家电</h3>
            <ul>
                <li><a class="active" href="javascript:;" data-id="0">热门</a></li>
                <li><a href="javascript:;" data-id="1">电视影音</a></li>
                <li><a href="javascript:;" data-id="2">电脑</a></li>
                <li><a href="javascript:;" data-id="3">家居</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item active"><img src="./tab01.png" alt="" /></div>
            <div class="item"><img src="./tab02.png" alt="" /></div>
            <div class="item"><img src="./tab03.png" alt="" /></div>
            <div class="item"><img src="./tab04.png" alt="" /></div>
        </div>
    </div>

js代码:

<script>
      const ul = document.querySelector('.tab-head ul')
      const items = document.querySelectorAll('.tab-content .item')
      ul.addEventListener('mouseover',function(e){
        if(e.target.tagName === 'A') {
            //排他思想，先移除原来的active
            document.querySelector('.tab-head .active').classList.remove('active')
            //为当前元素添加active
            e.target.classList.add('active')
            const i = e.target.dataset.id
            //移除原来的active
            document.querySelector('.tab-content .active').classList.remove('active')
            //对应的大盒子添加active
            items[i].classList.add('active')
        }
      })
    </script>