<!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. NGINX开篇

    前言 最近空闲时间比较多, 开始阅读nginx源码, 阅读的过程总结和笔记整理了下, 汇集成了一个系列的文章, 由于nginx功能实在太多, 没法做到面面俱到, 只对已经阅读过的源码进行记录总结, 以 ...

  2. 【JMeter】JMeter在linux下运行

    之前在用JMeter做性能测试时基本都用自己的笔记本电脑. 考虑到网络传输和占用系统资源情况时进行了以下分析: 1 在笔记本上,开始-cmd "ping 服务器",得到传输时间.在 ...

  3. C语言简短程序gcc编译过程

    一.建立一个×.c源文件.这里起名:rocks.c 二.编辑源代码,在c源文件内输入如下代码: #include <stdio.h> int main() { puts("C R ...

  4. gimp之旅

    随着大学生活的告一段落,新的征途已经开始了.鉴于本人如此喜欢旅游,如此喜欢拍照,如此喜欢处理图片,所以打算在照片处理上下点功夫.总所周知,图像处理软件大牛级的就属windows下的photoshop以 ...

  5. jQuery.Autocomplete实现自动完成功能

    一.http://www.w3c.com.cn/jquery-plugin-autocomplete-参数及实例 二.jQuery plugin: Autocomplete 参数 minChars: ...

  6. 一张图读懂Java多线程

    1.带着疑问看图 1)竞争对象的锁和竞争CPU资源以及竞争被唤醒 2)何种情况下获取到了锁,何种情况下会释放锁 2.还是那张图 3.详细图解 1)Thread t = new Thread(),初始化 ...

  7. WebAPI 小知识

    1.HttpResponseMessage.ReasonPhrase可以返回原因说明短语, 用JQuery中的$.ajax调用,返回函数第三个参数可以获取,如下: success:function(d ...

  8. CSS构造模型

    div 边距 边框 定位 浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...

  9. Android AIDL 一探究竟

    AIDL ---(Android Interface Definition Language)Android接口定义语言 简述: 1.什么时候使用? 通信方式 使用场景 AIDL IPC .多个应用程 ...

  10. Oracle- 日期格式和数字类型处理

    更新数据库时间格式的显示格式的语句:(alter session set nls_date_format='YYYY-MM-dd'); to_date("要转换的字符串",&quo ...