纯CSS3完成选项卡，不要js完成的选项卡
我爱撸码，撸码使我感到快乐！
大家好，我是Counter。
今天就来敲一敲，选项卡，注意哦，不是一般利用js完成的选项卡，今天是纯用HTML和CSS来完成的，这怎么可能？那你不用js的点击事件，怎么处理？注意CSS3的新属性就可以完成啦，利用单选框的选择状态来查找兄弟元素，来改变下面元素的属性，就可以达到目的了。html的结构就不赘述了。
先看看效果：
效果有点丑，功能有就行了，懒得去修饰了，还有更重要的事等着我，好吧，代码给出：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS3选项卡</title>
<style>
/* 初始化 */
body, ul, li, a {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
/* 外面一层容器居中 */
.wrapper {
width: 600px;
margin: 0 auto;
font-size: 0;
background-color: #ccc;
}
/* 设置导航栏为块级行元素，并将里面的字体垂直居中 */
.nav .nav-list li {
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
user-select: none;
}
/* 设置主题新闻样式以及字体大小 */
.news ul {
display: none;
padding: 20px;
font-size: 18px;
background-color: #f7f7f7;
}
/* 将主题新闻里的每条新闻空开来 */
.news li {
padding: 10px;
}
/* 设置主题新闻的字体颜色 */
.news li a {
color: #888;
}
/* 最关键的一步，利用表单元素的属性，选中或者未选中，来设置，展示新闻主题是哪块 */
#hot:checked ~ .news .hot-news,
#home:checked ~ .news .home-news,
#international:checked ~ .news .international-news {
display: block;
}
/* 当表单元素被选中时，对应的导航栏背景颜色也跟着变 */
#hot:checked ~ .nav li:nth-of-type(1),
#home:checked ~ .nav li:nth-of-type(2),
#international:checked ~ .nav li:nth-of-type(3)
{
background-color: #f7f7f7
}
/* 将label标签的设置为行级块元素。同时设置大小，这样点击可点击的范围就变大了 */
.nav .nav-list label {
display: inline-block;
width: 200px;
height: 50px;
cursor: pointer;
}
/* 将单选框给隐藏掉 */
.wrapper input {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="radio" name="tab" id="hot" checked>
<input type="radio" name="tab" id="home">
<input type="radio" name="tab" id="international">
<div class="nav">
<ul class="nav-list">
<li>
<label for="hot">热门新闻</label>
</li>
<li>
<label for="home">国内新闻</label>
</li>
<li>
<label for="international">国际新闻</label>
</li>
</ul>
</div>
<div class="news">
<ul class="hot-news">
<li>
<a href="javascript:;">AAAAAAAAAAA</a>
</li>
<li>
<a href="javascript:;">AAAAAAAAAAA</a>
</li>
<li>
<a href="javascript:;">AAAAAAAAAAA</a>
</li>
<li>
<a href="javascript:;">AAAAAAAAAAA</a>
</li>
<li>
<a href="javascript:;">AAAAAAAAAAA</a>
</li>
</ul>
<ul class="home-news">
<li>
<a href="javascript:;">BBBBBBBBBBB</a>
</li>
<li>
<a href="javascript:;">BBBBBBBBBBB</a>
</li>
<li>
<a href="javascript:;">BBBBBBBBBBB</a>
</li>
<li>
<a href="javascript:;">BBBBBBBBBBB</a>
</li>
<li>
<a href="javascript:;">BBBBBBBBBBB</a>
</li>
</ul>
<ul class="international-news">
<li>
<a href="javascript:;">CCCCCCCCCCC</a>
</li>
<li>
<a href="javascript:;">CCCCCCCCCCC</a>
</li>
<li>
<a href="javascript:;">CCCCCCCCCCC</a>
</li>
<li>
<a href="javascript:;">CCCCCCCCCCC</a>
</li>
<li>
<a href="javascript:;">CCCCCCCCCCC</a>
</li>
</ul>
</div>
</div>
</body>
</html>
纯CSS3完成选项卡，不要js完成的选项卡的更多相关文章
- 一款纯css3实现的tab选项卡
今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 纯css3圆角下拉菜单 都没敢用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 一些纯css3写的公司logo
随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...
- 纯CSS3大转盘抽奖（响应式、可配置）
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
随机推荐
- 自动化脚本测试，postman使用沉淀
// 服务器地址 var server = 'XXXXXXXXXXXX'; //秘钥Key var secretKey = 'XXXXXXXXXXXX'; //获取当前时间 function crea ...
- 1. Scala概述
1.1 概述 联邦理工学院洛桑(EPFL)的Martin Odersky于2001年开始设计Scala Scala是Scalable Language的简写,是一门多范式的编程语言 1.2 Scala ...
- Luogu4197 Peaks
题目链接:洛谷 看到“只经过困难值小于等于$x$的路径”. 感觉有点眼熟. ow,就是[NOI2018]归程. 和那道题一样,可以直接建出Kruskal重构树,每次倍增寻找祖先中最上面的不大于$x$的 ...
- #学号 20175201张驰 《Java程序设计》第2周学习总结
教材学习内容总结: 一.第二章: 1:标识符与关键字 2:基本数据类型:四种整数类型(byte.short.int.long).两种浮点数类型(float.double).一种字符类型(char).一 ...
- Socket断开不报错(Java)
网上看了很多关于Socket的Demo,用起来挺好用也简单,不过都在断开连接时,都没有做好相关处理,导致每次主动断开时,会报错 如: java.net.SocketException: Socket ...
- Python request 在linux上持续并发发送HTTP请求遇到 Failed to establish a new connection: [Errno 11] Resource temporarily unavailable
并发数被限制 vim /etc/sysctl.conf 添加 net.ipv4.ip_local_port_range = 1024 65535 保存 /sbin/sysctl -p 让修改生效 ...
- PowerBI更新2019/04 - 解决方案架构 - PowerBI Solution Architecture（一图胜万字！）
Power BI 架构图 (2019/04) 1) Power BI Desktop 是一个免费的工具.它可以用来准备和管理数据模型:包括链接各种数据:做数据清洗:定义关系:定义度量值和层级关系:应用 ...
- GBDT总结
一.简介 gbdt全称梯度下降树,在传统机器学习算法里面是对真实分布拟合的最好的几种算法之一,在前几年深度学习还没有大行其道之前,gbdt在各种竞赛是大放异彩.原因大概有几个,一是效果确实挺不错.二是 ...
- leetcode143. Reorder List
用快慢双指针,可以使慢指针到达中间的时候快指针到达最后一个元素(奇数),或者倒数第二个元素(偶数).慢指针后面的元素是后半个链表,把后半个链表进行reverse,然后再插在原来的链表中就可以了 /** ...
- vue+element-ui实现表格checkbox单选
公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...