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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
layui使用label标签的方法
Sep 14 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
浅析vue-router原理
2018/10/19 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python如何对XML 解析
2020/06/28 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
英文自我鉴定
2013/12/10 职场文书
对标管理实施方案
2014/03/12 职场文书
公立医院改革实施方案
2014/03/14 职场文书
班风学风建设方案
2014/05/06 职场文书
开工仪式策划方案
2014/05/23 职场文书
中学教师个人总结
2015/02/10 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
开业庆典致辞
2015/08/01 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书