css实现选项卡

第一种input radio方法

ul{width:300px;height:200px;position: relative;padding-top:30px;box-sizing: border-box;}
ul,li{margin:0;padding:0;list-style-type: none;}
ul li{top:0;left:0;width:100%;height:100%;float:left;}
ul li div{background: #fff;position: absolute;top:0;left:-1px;z-index: 0;border:1px solid #ccc;width:100%;height: 100%;}
ul li input{display:none;}
ul li label{z-index:90;position: absolute;top:-29px;left:-1px;width:50px;height:30px;text-align: center;line-height: 30px;background:#ccc;color:#333;border-radius:5px 5px 0 0} 
ul li:nth-child(2) label{left:60px;}
ul li:nth-child(3) label{left:120px;}
input[type='radio']:checked ~ div{z-index: 7;}
input[type='radio']:checked ~ label{border:1px solid #ccc;background:#fff;border-bottom: none;}

<div class="toggleDemo" style="margin-top:50px;">
			<ul>
				<li>
					<input type="radio" id="tab1" checked="checked" name="tab"/>
						<label for="tab1">tab1</label>
						<div class="tab1">tab1内容</div>
				</li>
				<li>
					<input type="radio" id="tab2" name="tab" />
						<label for="tab2">tab2</label>
						<div class="tab2">tab2内容</div>
				</li>
				<li>
					<input type="radio" id="tab3" name="tab" />
						<label for="tab3">tab3</label>
						<div class="tab3">tab3内容</div>
				</li>
			</ul>
			
		</div>

第二种a target方法

<ul>
    <li>
        <div class="content" id="content1">选项一内容</div>
        <a href="#content1">选项一</a>
    </li>
    <li>
        <div class="content" id="content2">选项二内容</div>
        <a href="#content2">选项二</a>
    </li>
    <li>
        <div class="content" id="content3">选项三内容</div>
        <a href="#content3">选项三</a>
    </li>
</ul>

a{ text-decoration: none; color: #000;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li:last-child a{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li .content:target{ opacity: 1;}
ul li .content:target+a{ color: #fff; background-color: #000;}
	</style>

a hover效果

<ul>
    <li>
        
        <a href="#content1">选项一</a>
        <div class="content" id="content1">选项一内容</div>
    </li>
    <li>
        
        <a href="#content2">选项二</a>
        <div class="content" id="content2">选项二内容</div>
    </li>
    <li>
       
        <a href="#content3">选项三</a>
         <div class="content" id="content3">选项三内容</div>
    </li>

a{ text-decoration: none; color: #000;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li:last-child a{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #000;}
ul li:nth-child(1) div{opacity: 1}
ul li:nth-child(2) a:hover ~ div{opacity: 1}
ul li:nth-child(3) a:hover ~ div{opacity: 1}
ul li a:hover{background:#000;color:#fff;}
ul li:nth-child(1) a{background:#000;color:#fff;}

下面是其他的css效果

//html内容
<div class="toggleDemo">
		  <input type="checkbox" id="tabCheck" style="display:none">
		  <div class="tabBox1">
		  	tab1
		  </div>
		  <div class="tabBox2">
		  	tab2
		  </div>
		  <label for="tabCheck" >tab1</label>
		  <label for="tabCheck">tab2</label>
		  
		</div>

//css内容
	.toggleDemo{
	width:300px;
	height:200px;
	border:1px solid #ccc;
}
:checked ~ .tabBox1{display: block;}
:checked ~ .tabBox2{display: none;}
.tabBox1{display: none;}

特别提示：做选项卡处理会有问题哦，自行查看；这种用法可以当作文字内容的展开收起

<div class="demo">
		  <input type="checkbox" id="check" style="display:none">
		  <p>HTC 计划在 10 月 22 日推出区块链智能手机</p>
		  <div class="element">
		    <p>该公司一个有趣的发展方向就是决定推出名为 Exodus 的区块链智能手机 ... 该手机制造商在照片分享应用 Instagram 上为这个即将推出的区块链智能手机建造了一个新的页面</p>
		  </div>
		  <label for="check" class="check-in">更多↓</label>
		  <label for="check" class="check-out">收起↑</label>
		</div>

.demo{width: 200px;padding-left:100px;padding-top: 10px;}
.element{
  width: 200px;
  padding-top: 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s;
} 
:checked ~ .element{
  max-height: 666px;
}
:checked ~ .check-out{
  display: block;
}
:checked ~ .check-in{
  display: none;
}
.check-in,.check-out{
  color: blue;
  cursor: pointer;
  margin-top: 15px;
}
.check-out{
  display: none;
}