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