点击同一个div 下面3个div进行切换
效果:点击换一批的时候下面div进行切换
一、html部分:
<div class="wrap" style="cursor: pointer;">
<div class="d40">
<span class="fl d41">猜你喜欢</span>
<div class="fr cl d42">
<div class="fl">换一批</div>
<div class="fr d43"><img src="image/change.png" alt=""></div>
</div>
</div>
<div class="d44 cl">
<ul>
<li>
<div class="d45">头条抖音流量包</div>
<div class="d46">9.00元</div>
<div class="d47 fl"><img src="image/2701ta7akkvej86tt8e36_170x170.jpg" alt=""></div>
<div class="d48 fl">包含15GB头条系定向流量，特惠任性购</div>
</li>
<li>
<div class="d45">芒果TV定向流量包</div>
<div class="d46">9.00元</div>
<div class="d47 fl"><img src="image/2702ta7s9f9cchptt2dj8_170x170.jpg" alt=""></div>
<div class="d48 fl">包含15GB芒果TV定向流量，特惠任性购</div>
</li>
<li>
<div class="d45">快手定向流量包</div>
<div class="d46">9.00元</div>
<div class="d47 fl"><img src="image/2703ta7sk3ya85rttr5tux_170x170.png" alt=""></div>
<div class="d48 fl">包含15GB快手定向流量，特惠任性购</div>
</li>
<li>
<div class="d45">WLAN任我用套餐</div>
<div class="d46">0.00元</div>
<div class="d47 fl"><img src="image/2704t7qezxpkwj4tt576a_170x170.png" alt=""></div>
<div class="d48 fl">轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？...</div>
</li>
<li>
<div class="d45">腾讯视频包</div>
<div class="d46">9.00元</div>
<div class="d47 fl"><img src="image/2705t77wrswczn8ttgy63_170x170.jpg" alt=""></div>
<div class="d48 fl">轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？...</div>
</li>
</ul>
</div>
<div class="d49 cl" style="display: none;">
<ul>
<li>
<div class="d45">流量快餐包</div>
<div class="d46">1.00元</div>
<div class="d47 fl"><img src="image/2706t7jdgzh5cpfbyam6_170x170.png" alt=""></div>
<div class="d48 fl">即办即用。</div>
</li>
<li>
<div class="d45">30元流量安心包（长期有效版）</div>
<div class="d46">0.00元</div>
<div class="d47 fl"><img src="image/2707t7hkmfnt2wttdbqg_170x170.png" alt=""></div>
<div class="d48 fl">轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？...</div>
</li>
<li>
<div class="d45">芒果TV视频包</div>
<div class="d46">10.00元</div>
<div class="d47 fl"><img src="image/2708t77w295rt4bttg7dx_170x170.jpg" alt=""></div>
<div class="d48 fl">轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？...</div>
</li>
<li>
<div class="d45">优酷视频包</div>
<div class="d46">10.00元</div>
<div class="d47 fl"><img src="image/2709t77wqcudvcattgmpm_170x170.jpg" alt=""></div>
<div class="d48 fl">轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？...</div>
</li>
<li>
<div class="d45">网易云音乐</div>
<div class="d46">3.00元</div>
<div class="d47 fl"><img src="image/2710takhn5jr5dzttqb2y_170x170.png" alt=""></div>
<div class="d48 fl">轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？...</div>
</li>
</ul>
</div>
<div class="d50 cl" style="display: none;">
<ul>
<li>
<div class="d45">【5G优惠】三星Galaxy A90 5G手机 128G公开版</div>
<div class="d46">3699.00元</div>
<div class="d47 fl"><img src="image/2711ta48q5vkwcgttgjtub_170x170.jpg" alt=""></div>
<div class="d48 fl">享罗马仕无线充好礼</div>
</li>
<li>
<div class="d45">【优惠购机】vivo iQOO Pro 5G版全网通智能手机</div>
<div class="d46">3498.00元</div>
<div class="d47 fl"><img src="image/2712thvburqg9vvtt2c7e_170x170.jpg" alt=""></div>
<div class="d48 fl">优惠购机享300元优惠</div>
</li>
<li>
<div class="d45">【熠天海纳】魅族16s 128GB 公开版4G智能手机</div>
<div class="d46">3198.00元</div>
<div class="d47 fl"><img src="image/2713ta8smqapa2dttmsrx_170x170.jpg" alt=""></div>
<div class="d48 fl">新品现货 顺丰速发</div>
</li>
<li>
<div class="d45">华为移动路由5G CPE Pro</div>
<div class="d46">2399.00元</div>
<div class="d47 fl"><img src="image/2714ta7w3t3kdfatt5rnw_170x170.jpg" alt=""></div>
<div class="d48 fl">巴龙5000芯片 5G双模</div>
</li>
<li>
<div class="d45">【泰龙吉】红米Note7Pro 6+128GB公开版4G智能手机</div>
<div class="d46">1659.00元</div>
<div class="d47 fl"><img src="image/0127111tasga5nr7jpttgcn9_170x170.jpg" alt=""></div>
<div class="d48 fl">中国移动终端，安全可靠，等你选购！邂逅好货，发现理想生活，抢...</div>
</li>
</ul>
</div>
</div>
二、css部分
.d40{
height: 67px;
/* padding-top: 32px; */
font-size: 22px;
color: #222222;
}
.d41{
padding-top: 32px;
}
.d42{
width: 70px;
margin-right: -700px;
font-size: 14px;
padding-top: 40px;
color: #666666;
}
.d43{
margin-top: 1px;
}
.d44 ul li{
float: left;
width: 238px;
height: 341px;
border: 1px solid #e8e8e8;
}
.d45{
padding: 26px 10px 0;
font-size: 18px;
text-align: center;
color: #222222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d46{
padding-top:14px;
font-size: 14px;
text-align: center;
color: #e40077;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d47{
width: 150px;
height: 150px;
margin-left: 33px;
margin-top: 10px;
}
.d47 img{
width: 150px;
height: 150px;
}
.d48{
color: #808080;
overflow: hidden;
font-size: 12px;
/* margin-top: 30px;
margin-left: 30px; */
padding:30px 15px 0 15px ;
}
.d49 ul li{
float: left;
width: 238px;
height: 341px;
border: 1px solid #e8e8e8;
}
.d50 ul li{
float: left;
width: 238px;
height: 341px;
border: 1px solid #e8e8e8;
}
三、js部分 ;
$(".d42").click(function () {
var d44 = document.getElementsByClassName("d44")
var d49 = document.getElementsByClassName("d49")
var d50 = document.getElementsByClassName("d50")
if (d44[0].style.display != "none") {
$(".d44").css('display', "none");
$(".d49").css('display', "block");
$(".d50").css('display', "none");
} else if (d49[0].style.display != "none") {
$(".d44").css('display', "none");
$(".d49").css('display', "none");
$(".d50").css('display', "block");
} else if (d50[0].style.display != "none") {
$(".d44").css('display', "block");
$(".d49").css('display', "none");
$(".d50").css('display', "none");
}
})
欢迎各位大神指点和评论;
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· Vue3状态管理终极指南：Pinia保姆级教程