js实现鼠标单击Tab表单切换效果


Posted in Javascript onMay 16, 2018

本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下

代码:

<!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: 0 auto; 
    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.01s 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" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab1</a></li> 
     <li id="2" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab2</a></li> 
     <li id="3" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab3</a></li> 
     <li id="4" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab4</a></li> 
     <li id="5" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab5</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>

效果图:

js实现鼠标单击Tab表单切换效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过url查找a元素并点击
Apr 09 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
vue ssr 指南详读
Jun 29 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 #Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 #Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 #Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 #Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 #Javascript
解决Mac node版本升级失败的问题
May 16 #Javascript
在Mac下彻底卸载node和npm的方法
May 16 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
在PHP的图形函数中显示汉字
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
JS写滑稽笑脸运动效果
2020/05/28 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python3生成手写体数字方法
2018/01/30 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python GUI编程完整示例
2019/04/04 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
简单了解python列表和元组的区别
2020/05/14 Python
python3中确保枚举值代码分析
2020/12/02 Python
雅虎笔试题(字符串操作)
2015/03/24 面试题
一道Delphi面试题
2016/10/28 面试题
优秀中学生事迹材料
2014/01/31 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
2014年校长工作总结
2014/12/11 职场文书
党员争先创优承诺书
2015/01/20 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python