互联网+创新示范学校  十大职业教育品牌机构 会计教育品牌 计算机教育品牌 人社部职业资格认证 学历教育助学单位 您身边的教育专家
2018南京会计培训
欢迎回家!您的会计证考证,计算机,考证,学历家园!请登陆学员中心 南京会计培训 2019会计初级职称班-2019南京会计初级职班全面开班! 首页 学校首页
19年秋大专、本科学历开始招生,南京大学等双一流名校 为您加油!就业、加薪、升职、考证、积分落户必备! 学历经不起等待!先报先录 轻松取证!

南京金蓝航 金科职业培训学校

学校电话:
025-84606360
025-52281675
E-mail:
rpjy2008@126.com
西祠版号:b1261199
学校网站:www.njccc.cn

点击这里给我发消息 点击这里给我发消息






会计 计算机编辑

课程推荐

css3 选项卡

代码

这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。

关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况。

HTML代码

<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>

<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>

CSS代码

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 20px;
  text-align: left;
  font-family: Lato;
  color: #fff;
  background: #9b59b6;
}

.tabs {
  width: 650px;
  float: none;
  list-style: none;
  position: relative;
  margin: 80px 0 0 10px;
  text-align: left;
}
.tabs li {
  float: left;
  display: block;
}
.tabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs label {
  display: block;
  padding: 14px 21px;
  border-radius: 2px 2px 0 0;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
  background: #8e44ad;
  cursor: pointer;
  position: relative;
  top: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
  background: #703688;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 25px;
  position: absolute;
  top: 53px;
  left: 0;
  background: #612e76;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 17px;
  background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

第二种

<style type="text/css">
 body{margin:0; font-size:12px; background:#666;}
 #box{width:400px; height:300px; margin:100px auto 0;}
 #tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
 #tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
 a{font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
 a:hover{color:red;}
 #tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
 #t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
 <li><a href="#t_1">tab_1</a></li>
 <li><a href="#t_2">tab_2</a></li>
 <li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
 <div id="t_1">tab_壹</div>
 <div id="t_2">tab_贰</div>
 <div id="t_3">tab_叁</div>
</div>
</div>

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

    推荐学员 在线报名 需求提交 电子货币查询   微信公众号
报名地址: 点击这里给我发消息  点击这里给我发消息  电话025-84606360  52281675

地图导航

银联在线支付

1.南京大光路47号,宏鹰大厦803  点击查看具体位置地图
附近公交站台:1.光华门 2.光华门(北) 3.解放南路 4.大光路 5.象房村 6.中和桥

2.江宁区金箔路999号银谷大厦506  点击查看具体位置地图
附近公交站台:1.商城 2.区委 3.供销商厦 4.萃文路 5.天印公园

报名日期:周一至周日 9:00—20:00 节假日照常报名    学校网址:www.njccc.cn
版权所有 南京金蓝航教育咨询有限公司 版权所有 不得转载 我要啦免费统计苏ICP备14030846号 站点地图   网站管理  校务管理  代理入口