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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
javascript json 新手入门文档
Dec 03 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
vue组件间通信解析
2017/03/01 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python实现关键词提取的示例讲解
2018/04/28 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
numpy.where() 用法详解
2019/05/27 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python numpy存取文件的方式
2020/04/01 Python
python isinstance函数用法详解
2020/02/13 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
医院护士的求职信
2014/01/03 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
节能环保标语
2014/06/12 职场文书
投诉信格式范文
2015/07/02 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Golang二维数组的使用方式
2021/05/28 Golang
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
部分武汉产收音机展览
2022/04/07 无线电