纯CSS实现“Tab选项卡标签切换”代码

可能用到选项卡,很多同学都会用 JQuery +CSS,其实纯CSS就可以达到选项卡效果,对于选项卡之间切换过渡效果也是可以通过CSS就可以实现。效果如下图:纯CSS实现“Tab选项卡标签切换”代码

 

利用纯CSS实现“tab选项卡切换”示例代码

有背景颜色的地方都是很重要的地方,大家自己注意一下就可以了!

 

index.html


<!DOCTYPE html>
<html>
<head>
<title>
Wordpress响应式幻灯片素材下载</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<link rel="shortcut icon" href="http://www.yzipi.com/wp-content/themes/yzipi/images/favicon.ico" />
<link rel='stylesheet' id='index-css'  href='http://www.yzipi.com/wp-content/themes/yzipi/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='index-css'  href='css/index.css' type='text/css' media='all' />

</head>
<body>
 <a href="http://www.yzipi.com/" class="logos" title="Wordpress主题" rel="home"><img src="https://www.yzipi.com/wp-content/themes/yzipi/images/logo.png" alt="柚子皮Logo"></a>

<div class="juzhong">

<div class="widget widget-tab">
<input type="radio" name="widget-tab" id="new" checked="checked"/>
<input type="radio" name="widget-tab" id="hot"/>
<input type="radio" name="widget-tab" id="random"/>
<div class="widget-title">
<ul>
<li class="new">
<label for="new">学校新闻</label>
</li>
<li class="hot">
<label for="hot">通知公告</label>
</li>
<li class="random">
<label for="random">教研学术</label>
</li>
</ul>
</div>
<div class="widget-box">
<ul class="new-list">

<li class="we">
  <img src="images/4bfedadf-0b82-4bac-8807-5853ce781b68-500x278.jpg" alt="" />
  <a href="#" class="fwe">我校举办“互联网+”创业大赛</a>  <p>1月9日上午,我校2019-2020学年第一学期期末科技工作会议在图书馆103会议室召开。校长孟长功&#8230;</p>
</li>
 <li><a href="#">学校举办星语心愿•爱动会</a><span> 2020.02.12</span></li>
<li><a href="#">广东省高校智慧课堂创新大赛获奖</a><span> 2020.02.12</span></li>
<li><a href="#">学举行2019年“顶新明日朝阳奖学金”爱心见面会</a><span> 2020.02.12</span></li>
<li><a href="#">经济与管理学院志愿活动</a><span> 2020.02.11</span></li>
<li><a href="#">我校举行新教师入职仪式及座谈会</a><span> 2020.02.10</span></li>
<li><a href="#">外国语言与文化学院开展毕业生就业回访</a><span> 2020.02.10</span></li>
<li><a href="#">学生志愿者暑期“三下乡”实践活动</a><span> 2020.02.10</span></li>
</ul>

<ul class="hot-list">
<li class="we">
  <img  src="images/526adcf4-5c9f-4055-bccf-4415bec9dbf7-500x278.jpg"  alt="" />
  <a href="#" class="fwe">秉承四心原则,提高培养质量</a>  <p>陈宝生部长指出,高教大计、本科为本,本科不牢、地动山摇。在教务处工作的我倍感身上肩负的使命和责任。</p>
</li>
 <li><a href="#">关于深化本科教育教学改革意见</a><span> 2020.02.14</span></li>
<li><a href="#">我校新增两个教育部科研平台</a><span> 2020.02.14</span></li>
<li><a href="#">做好2020年春季在线教学工作的通知</a><span> 2020.02.12</span></li>
<li><a href="#">计算机实验室对外开放通知</a><span> 2020.02.11</span></li>
<li><a href="#">学校图书馆暂停开放通知</a><span> 2020.02.11</span></li>
<li><a href="#">关于开展“礼敬中华优秀传统文化”活动</a><span> 2020.02.10</span></li>
<li><a href="#">2020年接收推免研究生招生公告</a><span> 2020.02.10</span></li>
</ul>
<ul class="random-list">
<li class="we">
  <img  src="images/7b730278-0c7e-477c-8c9d-913dfddf5ef4-500x278.jpg"  alt="" />
  <a href="#" class="fwe">3D打印技术专场学术报告会</a>  <p>多孔模型具有质量轻、复合性能好的特点,在航空、航天、船舶等行业具有广泛应用前景,广受关注。相比传统材料</p>
</li>
 <li><a href="#">我校参加省高新技术成果展</a><span> 2020.02.14</span></li>
<li><a href="#0">融合的创新人才培养模式探索</a><span> 2020.02.14</span></li>
<li><a href="#">iCAN赛课合一创新教育模式</a><span> 2020.02.14</span></li>
<li><a href="#">高层次人才培养体系研究</a><span> 2020.02.14</span></li>
<li><a href="#">我校管理论坛举行治理专题讲座</a><span> 2020.02.14</span></li>
<li><a href="#">人工智能纳米光子学中心第五期“格致沙龙”举行</a><span> 2020.02.10</span></li>
<li><a href="#">我校举办《自然》大师课堂科学论文讲座</a><span> 2020.02.10</span></li>
</ul>
</div>
</div>

</div>
<a href="http://www.yzipi.com/3449.htm" class="fan">返回下载页</a>

</body></html>

 

index.css

@media only screen and (min-width:900px) {
.logos{width:200px;margin:0 auto;display:block;margin-top:20px;}
.logos img{width:100%;height:auto;}
.juzhong{width:100%;margin-top:30px;background:#f4f4f4;padding:30px 0px;overflow:hidden;border-top:1px solid #eceaea;border-bottom:1px solid #eceaea;}
.fan{width:200px;
	line-height:45px;
	background:#d8643f;
	border-radius:4px;
	text-align:center;
	color:#fff;
	display:block;margin:30px auto;}	
.fan:hover{color:#FFF;}


/*代码块*/
.widget{width:530px;margin:0 auto;background:#fff;padding:30px;border:1px solid #e9e8e8}
.widget-tab input{display:none}
.widget-tab .widget-box ul{display:none}
.widget-title{height:40px;width:100%;border-radius:2px;}
.widget-title ul li{width:33.333%;float:left;line-height:40px;background:#eeeeee}
.widget-title ul li label{width:100%;display:block;text-align:center;}
#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#23456b;color:#fff;}
#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}
.widget-box{width:100%;}
.widget-box ul li{width:100%;clear:both;text-indent:5px;}
.widget-box ul li:last-child{border-bottom:none;}
.widget-box ul li a{color:#313131;line-height:45px;} 
.widget-box ul li a:before {
	content: ' ▷';margin-right:10px;font-size:14px;
	}
.widget-box ul li span{float:right;color:#888888;font-size:14px;margin-top:14px;font-style:italic}
.we{overflow:hidden;border-bottom:none;padding:20px 0px;}
.we img{width:176px;height:auto;margin-right:30px;float:left;border-radius:2px;}
.we .fwe{float:left;width:324px;font-size:20px;color:#000;overflow:hidden;display:block;margin-top:-10px;text-indent:0px;}
.we p{font-size:15px;line-height:25px;margin-top:10px;width:324px;float:left;text-indent:0px;margin-top:-2px;}

}

@media only screen and (max-width:900px) {
.logos{width:100px;margin:0 auto;display:block;margin-top:10px;}
.logos img{width:100%;height:auto;}
.juzhong{width:100%;margin-top:15px;}

.fan{width:140px;
	line-height:35px;
	background:#d8643f;
	border-radius:4px;
	text-align:center;
	color:#fff;
	display:block;margin:25px auto;}	
.fan:hover{color:#FFF;}

/*选项卡*/
.widget{width:100%;margin-top:25px;border-bottom:5px solid #eeeeee;padding-bottom:10px;}
.widget-tab input{display:none}
.widget-tab .widget-box ul{display:none}
.widget-title{margin:0 auto;height:35px;width:90%;border-radius:2px;}
.widget-title ul li{width:33.333%;float:left;line-height:35px;background:#eeeeee}
.widget-title ul li label{width:100%;display:block;text-align:center;}
#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#23456b;color:#fff;}
#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}
.widget-box{width:90%;margin:0 auto;}
.widget-box ul li{padding:18px 0px;border-bottom:1px solid #ededed;width:100%;clear:both;}
.widget-box ul li:last-child{border-bottom:none;}
.widget-box ul li a{color:#313131;} 
.widget-box ul li span{display:none;}
.we{overflow:hidden;}
.we img{width:100%;height:auto;float:left;border-radius:2px;}
.we .fwe{width:100%;font-weight:bold;font-size:20px;color:#000;overflow:hidden;display:block;margin-top:15px;float:left;}
.we p{font-size:15px;line-height:25px;margin-top:10px;width:100%;float:left;}
}

 

效果演示地址:

http://www.yzipi.com/wp-content/down/yzipi102/index.htm

    A+
发布日期:2020年09月16日 19:08:56  所属分类:HTML
最后更新时间:2020-09-16 19:08:56
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
头像
wp dz 帝国 dede phpcms等快速建站服务
wp dz 帝国 dede phpcms等快速建站服务
  • ¥ 999元
  • 市场价:4999元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 1999.9元
  • 市场价:20000元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 49.9元
  • 市场价:99.9元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: