js选项卡的制作方法


Posted in Javascript onJanuary 23, 2017

本文实例为大家分享了js选项卡的具体代码,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>选项卡</title>
  </head>
  <style>
    /*复位*/
  *{padding:0;margin:0;}
    div#tabs{
      width:600px;
      height:400px;
      margin:100px auto;
      position:relative;
    }
    .tab{
      width:100px;
      height:50px;
      position:absolute;
      top:0;
    }
    input.tab{
      z-index:11;
      opacity:0;
      cursor:pointer;
    }
    a.tab{
       z-index:10;
       text-align:center;
       line-height:50px;
       text-decoration:none;
       color:black;
       font-size:30px;
    }
    .tab1{
      left:0px;
    }
    .tab2{
      left:100px;
    }
    .tab3{
      left:200px;
    }
    /*鼠标滑过*/
    input.tab:hover+a{
     background-color:#ccc;
    }
    /*鼠标点击*/
    input.tab:checked+a{
      border:1px solid #ccc;
      border-bottom:none;
      background-color:white;
    }
    
    /*scroll设置*/
    div#scroll{
      position:absolute;
      top:50px;
      width:100%;
      height:350px;
      border:1px solid #ccc;
      overflow:hidden;
    }
    div#scroll>div.content{
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:100%;
      padding:15px;
      transition:all 0.6s linear;
    }
    input.tab1:checked~div#scroll>div.content1,
    input.tab2:checked~div#scroll>div.content2,
    input.tab3:checked~div#scroll>div.content3{
      left:0%;
    }
  </style>
 <body>
  <div id="tabs">
   <input type="radio" name="tab" class="tab tab1" checked />
   <a href="#" class="tab tab1">选项一</a>
   <input type="radio" name="tab" class="tab tab2"/>
   <a href="#" class="tab tab2">选项二</a>
   <input type="radio" name="tab" class="tab tab3"/>
   <a href="#" class="tab tab3">选项三</a>
   <div id="scroll">
     <div class="content content1">
      哈哈111<br/>
      哈哈111<br/>
      哈哈111<br/>
      哈哈111<br/>
      哈哈111<br/>
     </div>
     <div class="content content2">
      哈哈222<br/>
      哈哈222<br/>
      哈哈222<br/>
      哈哈222<br/>
      哈哈222<br/>
     </div>
     <div class="content content3">
      哈哈333<br/>
      哈哈333<br/>
      哈哈333<br/>
      哈哈333<br/>
      哈哈333<br/>
     </div> 
   </div>
  </div>
 </body>

</html>

效果图:

js选项卡的制作方法

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

Javascript 相关文章推荐
javascript教程:关于if简写语句优化的方法
May 17 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jquery遍历json对象集合详解
May 18 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
You might like
PHP里的中文变量说明
2011/07/23 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python配置grpc环境
2019/01/01 Python
python适合人工智能的理由和优势
2019/06/28 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
幼师专业毕业生自荐信
2013/09/29 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
大学生毕业鉴定
2014/01/31 职场文书
大学生应聘求职信
2014/05/26 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
社区义诊通知
2015/04/24 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs