jQuery学习笔记(2)--table标签切换
来源:互联网 发布:淘宝积分兑换优惠券 编辑:程序博客网 时间:2024/06/05 07:25
当鼠标放在不同的table标签上时,下面的页面进行相应的变换。
html代码:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>tab标签的切换</title> <style type="text/css"> body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;} .wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;} .tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;} .tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer; border-top:4px solid #fff;} .tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; } .products{ width: 1002px;border:1px solid #ddd;height: 476px;} .products .main{float: left;display: none;} .products .main.selected{display: block;} .tab li.active{border-color: red; border-bottom: 0;} </style> <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> <script type="text/javascript">//author:一叶扁舟(skiff)//作用:tab标签的切换//时间:17:43 2017/3/18 $(function(){ //鼠标放上去就会触发的事件 $(".tab >li").mouseenter(function(){ //鼠标放上去时,将当前的li元素添加active样式,其他的兄弟元素都移除active样式 $(this).addClass("active").siblings().removeClass("active"); //获取当前tab中鼠标停在的table栏的索引 var index = $(this).index(); // console.log(index); //根据这个索引切换,下面的展示 $(".main").eq(index).addClass("selected").siblings().removeClass("selected"); }) }) </script></head><body> <div class="wrapper"> <ul class="tab"> <li class="tab-item active">国际大牌<span>◆</span></li> <li class="tab-item">国妆名牌<span>◆</span></li> <li class="tab-item">清洁用品<span>◆</span></li> <li class="tab-item">男士精品</li> </ul> <div class="products"> <div class="main selected"> <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a> </div> </div> </div> </body></html>
0 0
- jQuery学习笔记(2)--table标签切换
- jquery table标签切换
- jQuery学习笔记--标签切换
- jquery学习笔记 切换皮肤
- jquery-table切换
- jquery标签切换
- jQuery 标签切换
- jQuery切换tab标签
- JQuery 实例:标签切换
- table标签的学习
- jquery div tab标签切换
- jQuery 实现Tab标签切换
- jquery实现标签切换效果
- js(jquery) tab标签切换
- 学习笔记:基于jquery的tab切换函数
- HTML学习---------1.18 table标签
- javascript(jQuery版)切换table效果自动切换
- jquery 关于table的子标签tbody
- leetcode86. Partition List
- JS字符串常用处理函数总结
- 断言assertthat用法
- SODBASE CEP学习(十一):分布式集群-数据自动分发
- SCU
- jQuery学习笔记(2)--table标签切换
- 九度OJ学习笔记 题目1156
- Linux文件打包与压缩
- Qt VS2013_Qt_Redis的配置
- MarkLogic学习——XPath中的text()和string()区别
- 使用Visual Studio 2017作为Linux C++开发工具
- cookie实现自动登陆原理
- warmup2
- 谷哥的小弟学后台(40)——MyBatis输出映射resultType以及resultMap