选项卡的实现的几种方法

来源：互联网发布：学数据库之前学什么编辑：程序博客网时间：2024/06/03 19:21

今天总结一下页面中选项卡实现的几种方法。在实战中会经常的使用到。下面的方法都是纯HTML+CSS，并没有用到JS，JS日后补上。
一、使用：target属性实现选项卡
页面的结构：（html）
<div class="parent"><a href="#div1">选项卡1</a><a href="#div2">选项卡2</a><div id="div1"><p>选项卡1的内容</p></div><div id="div2"><p>选项卡2的内容</p></div></div>
注意：这里要注意内联元素在元代码中若有回车，则在页面中会出现选项卡的标题之间有一个缝隙，所以如上所示，两个a标签连着写。
页面的CSS：
      *{margin:0;padding:0;}body{padding:20px;}div.parent{position:relative;}a{border:1px solid #ccc;padding:10px;line-height:40px;background:#ffa;color:#000;text-decoration:none;position:relative;z-index:3;}div.parent > div{width:300px;height:200px;border:1px solid #ccc;background:#ffa;position:absolute;top:38px;left:0px;z-index:2;display:none;}div.parent > div:target{display:block;}
此方法的缺点是在不考虑浏览器的兼容问题的情况下，它无法控制选中的选项卡相对应的样式变化。并且地址栏也会出现相对应的div的id/
运行的结果：
二、使用：checked属性实现选项卡
页面结构：
       <ul class="tabs"><li><input type="radio" name="tabs" id="tab1" checked/><label for="tab1">选择卡1</label><div class="tab_content" id="tab_content1"><p>选项卡1的内容</p></div></li><li><input type="radio" name="tabs" id="tab2"/><label for="tab2">选择卡2</label><div class="tab_content" id="tab_content2"><p>选项卡2的内容</p></div></li></ul>
页面的CSS：
      *{margin:0;padding:0;list-style:none;box-sizing:border-box;}body{padding:20px;}.tabs{width:650px;position:relative;background:#aaf;}.tabs li{float:left;}.tabs input[type=radio]{/*隐藏单选框的样式*/position:absolute;top:-9999px;left:-9999px;}.tabs label{display:block;border:1px solid #000;padding:10px;text-align:center;border-radius:6px 6px 0 0 ;background:#aaf;border-bottom:1px solid transparent;position:relative;top:4px;z-index:3;transition:all 0.2s ease-in-out;}.tabs label:hover{background:#bbf;}.tabs .tab_content{width:100%;background:#faf;height:200px;position:absolute;top:43px;left:0px;z-index:2;border:1px solid #000;padding:10px;display:none;}.tabs input[type=radio]:checked + label{top:0px;padding-top:14px;background:#faf;}.tabs input[type=radio]:checked ~ div[id^=tab_content]{display:block;}
此处注意要把单选框的样式隐藏起来，不要在页面中显示。此方法相对于上面的方法做出了一些改进，使得我们可以控制选中的样式，但是由于采用了CSS3的属性，对于不兼容CSS3的浏览器来说就不能用了。
运行的结果：

0 0