div+css实现tab切换
——我一直不太信任自己的记忆力,所以我把它们都写下来
为了方便你们查看,css和js写在同一个html文件里,先看效果吧
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text-align: center; } ul{ list-style: none; } a{ text-decoration: none; color: #ff6666; font-family: Arial; } .tab-container{ width: 398px; height: 200px; border:1px #ffcccc solid; margin: 20px; position: relative; overflow: hidden; } /*tab-head begin*/ .tab-head{ width: 400px; height:30px; left:0; background: #ffcccc; position: absolute; left:-1px;//这里设置-1是为了li的border与最外层的border重合 } .tab-head li{ float:left; height: 29px; line-height: 29px; width: 78px; overflow: hidden; padding: 0 1px; border-bottom: 1px solid #ffcccc; background: #ffeeee; } li.select{ background: #fff; padding: 0; border-left: 1px solid #ffcccc; border-right: 1px solid #ffcccc; border-bottom: 1px solid #fff; } /*tab-head end tab-panel begin*/ .tab-panel{ position: relative; width: 100%; height: 85%; top: 15%; -webkit-transition:all 0.3s linear;//切换过渡效果 } .tab-panel section{ position: absolute; display: inline-block; width: 100%; height: 100%; } #panel-1{ left: 0; } #panel-2{ left: 100%; } #panel-3{ left: 200%; } #panel-4{ left: 300%; } #panel-5{ left: 400%; } </style> </head> <body> <div class="tab-container"> <ul class="tab-head"> <li id="1" class="select" onmouseover="$(this)"><a href="#">新闻</a></li> <li id="2" onmouseover="$(this)"><a href="#">规则</a></li> <li id="3" onmouseover="$(this)"><a href="#">须知</a></li> <li id="4" onmouseover="$(this)"><a href="#">趣闻</a></li> <li id="5" onmouseover="$(this)"><a href="#">关于</a></li> </ul> <div id="tab-panel" class="tab-panel"> <section id="panel-1"><p>这是panel-1</p></section> <section id="panel-2"><p>这是panel-2</p></section> <section id="panel-3"><p>这是panel-3</p></section> <section id="panel-4"><p>这是panel-4</p></section> <section id="panel-5"><p>这是panel-5</p></section> </div> </div> <script type="text/javascript"> function $(id){ var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute('class',''); }; id.setAttribute('class','select'); var ele = document.getElementById('tab-panel'); ele.style.left=-(id.id-1)+'00%'; } </script> </body> </html>
相关推荐
DIV+CSS+JavaScript实现tab切换的选项卡,进一步提升web开发技术.希望能够帮助到你,共享给大家.
初学者div+css:Tab页自适应,简单易上手
本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码。分享给大家供大家参考。具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助。 ...
div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容...
本文给大家分享一个demo基于HTML5+CSS3 实现灵动的动画 TAB 切换效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。 最终要实现的效果图如下: (1)点击tab栏显示...
DIV+CSS布局实例:TAB滑动门标签切换代码 比较实用的CSS控制链接颜色效果
实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件 11.实用jquery标签Tab插件下载可切换不同的颜色 12.推荐jquery仿淘宝网商品排行榜展示切换效果,适合电子商务网站使用 13.一款jQuery黑金钢动感Tab...
经过精心的赛选,希望对你程序的设计,美工代码的优化,起到抛砖引玉的效果。内含:1、仿阿里巴巴搜索;2、非常棒的tab切换;3、图片切换效果。
Tab菜单自动切换效果: 1.Html 2.Div+css 3.JavaScript
tab切换在项目中也算是常用技术,一般实现tab切换都用js或者jq实现,今天介绍两种只用css实现tab切换方法: 方法一: 原理:通过label标签的关联属性和input的单选类型实现相应div的显示 1.创建一个类名为wrap的div...
div+css+js实现选项卡切换,控制div的隐藏和显示
DivCssData(关联网页自动切片生成Div+Css软件数据库版)是一款只需要导入效果图,拉框线就可以生成标准的兼容性的DIV+CSS,同时集成图片切换、图片滚动、滑动门TAB效果、视频代码、表单、网页控件、JAVASCRIPT验证、...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我 安装依赖 ...div
这是一款采用了DIV css和jquery共同实现的大宽屏焦点图 Tab切换图片 适合游戏官网使用,比较大气,打开后,水平方向上铺满整个屏幕,在图片的下方,显示有TAB风格的切换按钮,鼠标点击即可切换到对应的大图片。...
本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <link rel=stylesheet ...