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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Javacript中自定义的map.js  的方法
Nov 26 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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
Protoss兵种介绍
2020/03/14 星际争霸
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
Node.js文件操作详解
2014/08/16 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
年终考核评语
2014/01/19 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
公司门卫岗位职责
2014/03/15 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
python 批量压缩图片的脚本
2021/06/02 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
golang生成vcf通讯录格式文件详情
2022/03/25 Golang