tab栏切换(原生js实现)
来源:互联网 发布:淘宝联系客服 编辑:程序博客网 时间:2024/06/08 11:07
这里是html代码
<div class="father"> <div class="top"> <ul class="tabs"> <li class="tab tabCurrent"><a href="javascript:void(0);">热门</a><span class="line"></span></li> <li class="tab"><a href="javascript:void(0);">国际大牌</a><span class="line"></span></li> <li class="tab"><a href="javascript:void(0);">国妆名品</a><span class="line"></span></li> <li class="tab"><a href="javascript:void(0);">个人护理</a><span class="line"></span></li> <li class="tab"><a href="javascript:void(0);">清洁用品</a><span class="line"></span></li> <li class="tab"><a href="javascript:void(0);">纸品湿巾</a></li> </ul> </div> <div class="bottom"> <div name="content" class="goods goodsShow">这是热门的内容</div> <div name="content" class="goods">这是国际大牌的内容</div> <div name="content" class="goods">这是国妆名品的内容</div> <div name="content" class="goods">这是个人护理的内容</div> <div name="content" class="goods">这是清洁用品的内容</div> <div name="content" class="goods">这是纸品湿巾的内容</div> </div> </div>
这里是css代码
* { margin: 0; padding: 0; font: 14px "simsun"; } a{ color: #333; text-decoration: none; } a:hover{ color:#c81623; } ul { list-style: none; } .father { width: 600px; height: 400px; margin: 100px auto; } .top { height: 30px; border-bottom: 1px solid #c81623; } .tabs { height: 30px; border: 1px solid #dddddd; border-bottom: 0 none; float: right; } .tab { float: left; position: relative; } li.tabCurrent { background-color: #fff; height: 27px; border-top: 3px solid #c81623; border-left: 1px solid #c81623; border-right: 1px solid #c81623; } li.tabCurrent a { line-height: 27px; padding: 0 13px; } .tab a { display: block; padding: 0 14px; height: 30px; line-height: 30px; } .tab .line { height: 20px; border-left: 1px solid #ddd; position: absolute; right: 0; top: 5px; } .goods { width: 598px; height: 368px; border: 1px solid #dddddd; border-top: 0 none; display: none; text-align: center; line-height: 300px; } div.goodsShow{ display: block; }
这里是js代码
var tabs = document.getElementsByTagName("li"); var goods = document.getElementsByName("content"); for (var i = 0; i < tabs.length; i++) { tabs[i].index = i; tabs[i].onmouseover = function(){ for (var j = 0; j < tabs.length; j++) { var cn = tabs[j].className; if(cn.indexOf("tabCurrent")){ tabs[j].className = cn.replace("tabCurrent",""); } } var className = this.className; this.className = className.concat(" tabCurrent"); for (var k = 0; k < goods.length; k++) { goods[k].style.display = "none"; } goods[this.index].style.display = "block"; } }
0 0
- tab栏切换(原生js实现)
- 原生JS实现TAB栏切换
- 原生JS实现tab切换
- 原生js实现tab切换
- 关于用原生js实现tab栏的切换:
- 原生JS的简单tab切换实现
- 原生js TAB切换
- tab切换原生js新手
- 原生js和jquery两种方式实现tab切换
- 原生JS实现tab切换--web前端开发
- JS实现tab切换
- js实现tab切换
- js实现tab切换
- 原生js写的tab切换
- JS实现tab栏的切换
- js实现切换Tab标签
- js实现tab切换以及自动切换
- 一个简单的原生js封装tab切换函数
- JHTP自测题_第十五章_文件、流和对象序列化(Files, Streams, and Object Serialization)
- php7新特性
- django笔记
- 鸟哥的linux私房菜学习笔记4
- 易聚之交错时空
- tab栏切换(原生js实现)
- POJ 3694 Network(割边+LCA)
- http-关于application/x-www-form-urlencoded等字符编码的解释说明
- Hudson之——持续集成服务器的安装与配置
- 对象成员
- Android Things:用户驱动-传感器
- 应用统计学与R语言实现学习笔记(一)——简介
- 经典例题(时钟)
- windows几个网络相关命令