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 相关文章推荐
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
常用DOM整理
Jun 16 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
浅析JS运动
Dec 28 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP 基本语法格式
2009/12/15 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python实时获取cmd的输出
2015/12/13 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
面料业务员岗位职责
2013/12/26 职场文书
2014年就业工作总结
2014/11/26 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
敬老院活动感想
2015/08/07 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
Python制作动态字符画的源码
2021/08/04 Python
Python pyecharts绘制条形图详解
2022/04/02 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server