想要多选一的效果,排他思想:当前元素设置样式,其余兄弟元素清除样式
案例:点击的按钮变色
<script src="jquery.min.js"></script> </head> <body> <button>选择</button> <button>选择</button> <button>选择</button> <button>选择</button> <button>选择</button> <button>选择</button> <script> $(function(){ $("button").click(function(){ //给所有按钮绑定点击事件 //当前元素变化背景颜色 $(this).css("background",'red'); //其余兄弟去除背景颜色 $(this).siblings("button").css("background",''); }) }) </script> </body>
案例:淘宝服饰精品案例分析
1.核心原理:鼠标经过左侧盒子某个li时,就让内容区盒子想对应图片显示,其余图片隐藏
2.需要得到当前li的索引号,就可以显示对应索引号的图片
3.jQuery得到当前元素索引号 $(this).index()
4.中间对应的图片,可以通过eq(index)方法去选择
5.显示元素 show() ,隐藏元素hide()
<style> *{ padding: 0; margin: 0; } li, a{ text-decoration: none; list-style: none; } .wrapper{ margin: 100px auto; width: 400px; height: 405px; border: 1px solid pink; } #left { float: left; width: 100px; height: 400px; } #left ul li{ width: 100px; height: 44px; border-bottom: 1px solid pink; border-right: 1px solid pink; line-height: 44px; text-align: center; } img{ float: right; width: 300px; height: 405px; } li:hover{ background-color: plum; } </style> <script src="jquery.min.js"></script> </head> <body> <script> $(function(){ //1.鼠标经过左侧盒子某个li $('#left li').mouseover(function(){ //2.得到当前li的索引号 var index = $(this).index(); //3.让右侧盒子相应索引号的图品显示出来可以通过eq(index)方法去选择 $('#content div').eq(index).show(); //4.其它盒子隐藏 $('#content div').eq(index).siblings().hide(); }) }) </script> <div class="wrapper"> <div id="left"> <ul> <li><a herf="#">女靴</a></li> <li><a herf="#">雪地靴</a></li> <li><a herf="#">冬裙</a></li> <li><a herf="#">呢大衣</a></li> <li><a herf="#">毛衣</a></li> <li><a herf="#">棉服</a></li> <li><a herf="#">女裤</a></li> <li><a herf="#">羽绒服</a></li> <li><a herf="#">牛仔裤</a></li> </ul> </div> <div id="content"> <div><img src="images/xs.jpg" alt=""></div> <div><img src="images/zjl.jpg" alt=""></div> <div><img src="images/zyl.jpg" alt=""></div> <div><img src="images/zxc.jpg" alt=""></div> <div><img src="images/mobile.2.jpg" alt=""></div> <div><img src="images/mobile1.jpg" alt=""></div> <div><img src="images/mobile2.jpg" alt=""></div> <div><img src="images/mobile3.jpg" alt=""></div> <div><img src="images/img1.jpg" alt=""></div> </div> </div> </body>