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 相关文章推荐
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
d3.js实现图形拖拽
Dec 19 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python实现word2Vec model过程解析
2019/12/16 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
紧急迫降观后感
2015/06/15 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电