我爱撸码，撸码使我感到快乐！
大家好，我是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>