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 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
js实现磁性吸附的示例
Oct 26 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
第五节--克隆
2006/11/16 PHP
PHP时间和日期函数详解
2015/05/08 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
详解Python迭代和迭代器
2016/03/28 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python File(文件) 方法整理
2019/02/18 Python
Python配置文件处理的方法教程
2019/08/29 Python
python实现代码统计器
2019/09/19 Python
python多进程间通信代码实例
2019/09/30 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
解决Python安装cryptography报错问题
2020/09/03 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
亮剑观后感600字
2015/06/05 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python