<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } ul{ list-style: none; } .cls{ width:1000px; height: 500px; margin: 0 auto; margin-top: 100px; } .cls1{ border:1px solid #ddd; border-bottom: 0; height: 50px; width:400px; } .cls1 li{ position: relative; float: left; width:100px; height: 50px; line-height: 45px; text-align: center; cursor: pointer; border-top:6px solid #fff; } .cls1 span{ position: absolute; right:0; top:0px; background: #ddd; width:2px; height: 40px; overflow: hidden; } .cls-products{ width:400px; border:2px solid #ddd; height:400px; } .cls-products .main{ float: left; display: none; } .cls-products .mainSelected{ display: block; } .cls1 li.active{ border-color: red; border-bottom: 0px; } </style> <script type="text/javascript"> $(function () { //获取ul中的所有的li,调用鼠标进入的事件 $(".cls1>li").mouseover(function () { //移除当前的li的所有兄弟元素li的类样式 $(this).siblings("li").removeClass("active"); //让当前li添加类样式 $(this).addClass("active"); //获取当前的li的索引 var index=$(this).index(); //获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式 $(".cls-products>div:eq("+index+")").siblings("div").removeClass("selected"); //当前对应的div添加类样式 $(".cls-products>div:eq("+index+")").addClass("selected"); }); }); </script> </head> <body> <h1>产品切换案例</h1> <hr > <div class="cls"> <ul class="cls1"> <li class="cls-item active">国际大牌<span>*</span></li> <li class="cls-item">国妆名牌<span>*</span></li> <li class="cls-item">清洁用品<span>*</span></li> <li class="cls-item">男士精品</li> </ul> <div class="cls-products"> <div class="mainSelected"> <a href="###"><img src="2-3-2.jpeg"alt="" ></a> </div> <div class="main"> <a href="###"><img src="2-3-3.jpeg"alt=""></a> </div> <div class="main"> <a href="###"><img src="2-3-6.jpeg"alt=""></a> </div> <div class="main"> <a href="###"><img src="2-3-8.jpeg"alt=""></a> </div> </div> </div> </body> </html>
运行结果:
Nearth===>WEB前端--第20课/JQuery/产品切换案列
最新推荐文章于 2019-11-16 17:30:09 发布