<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>tab Switch</title>

     <link rel="stylesheet" href="stylesheet/tabSwitch.css">

 </head>

 <body>

 <ul>

     <li>

         <input type="radio" id="radio1" name="tabs" checked>

         <label for="radio1">选项卡1</label>

         <div class="tabs-content" id="content1">1</div>

     </li>

     <li>

         <input type="radio" id="radio2" name="tabs">

         <label for="radio2">选项卡2</label>

         <div class="tabs-content" id="content2">2</div>

     </li>

 </ul>

 </body>

 </html>
*{

    margin:;

    padding:;

    list-style-type: none;

}

ul{

    margin:200px auto;

    width: 500px;

    position: relative;

}

li{

    float: left;

}

input[type="radio"]{

    position: absolute;

    left: -999em;

}

label{

    display: block;

    cursor: pointer;

    line-height: 50px;

    font-size: 20px;

    font-family: 微软雅黑;

    width: 80px;

    padding-top: 10px;

    padding-bottom: 10px;

    background-color: aqua;

    border-radius: 8px 8px 0 0;

    transition: all 0.2s linear;

}

div{

    top:70px;

    left:;

    position: absolute;

    width: 500px;

    height: 300px;

    background-color: aqua;

}

input[type="radio"]:checked~label{

    background-color: cadetblue;

    padding-top: 12px;

}

input[type="radio"]:checked~div {

    z-index:;

}

CSS3——选项卡切换的更多相关文章

  1. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  2. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  4. Android ViewPager实现选项卡切换

    ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...

  5. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  6. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  8. 常用js效果：选项卡切换

    js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...

  9. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. HDU 5603 the soldier of love 离线+树状数组

    这是bestcorder 67 div1 的1003 当时不会做 看了赛后官方题解,然后翻译了一下就过了,而且速度很快,膜拜官方题解.. 附上官方题解: the soldier of love 我们注 ...

  2. <转>LeetCode 题目总结/分类

    原链接:http://blog.csdn.net/yangliuy/article/details/44514495 注:此分类仅供大概参考,没有精雕细琢.有不同意见欢迎评论~ 利用堆栈:http:/ ...

  3. 深入理解Linux的系统调用【转】

    一. 什么是系统调用 在Linux的世界里,我们经常会遇到系统调用这一术语,所谓系统调用,就是内核提供的.功能十分强大的一系列的函数.这些系统调用是在内核中实现的,再通过一定的方式把系统调用给用户,一 ...

  4. jQuery遍历多层json数据

    1.json与jsonp的区别(待查) 2.要遍历的数据如下: {"status": "ok", "code": 200, "da ...

  5. HDU-2262 Where is the canteen 概率DP,高斯消元

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2262 题意:LL在一个迷宫里面转,每次走向周围能走的点的概率都是一样的,现在LL要随机的走到cante ...

  6. 【现代程序设计】【homework-03】【11061027】

    Q:你现在使用的代码规范是什么,  和上课前有什么改进? A: 代码规范........自定义的代码规范算 代码规范吗.....   Q:你的同伴有哪些优点 (列出至少三点), 和那些需要改进的地方 ...

  7. 电脑突然死机，系统日志记录事件ID=6008

    刚才正在写代码,在一次保存之后,正要刷新看下效果,电脑突然关机,没有任何提示或延迟.我的笔记本电池是一直插上的,也连接着电源. 重新开机之后,找到系统日志查看.只有这一条错误记录:非正常关机,事件60 ...

  8. 基于redis的IP地址快速查询

    在一些大数据处理中,我们需要用到IP地址查询,一般为了查询一个IP属于哪个地址,我们通常需要根据一个IP数据库来查询,网络上比较常用的IP库是纯真IP数据库.IP数据库里面的记录一般存储方式为IP的开 ...

  9. Linux就是这个范儿之第一次亲密接触(3)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行 有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...

  10. Android开发中常用的Eclipse快捷键

    关闭所有窗口Ctrl + Shift + W  关闭所有已打开的编辑窗口 重命名Alt + Shift + R    文件或变量重命名(先选中文件或变量再同时按下快捷键) 快速引包Ctrl + Shi ...