Home > Developer > Web Develop
Note that the red box above is the anchor of the disguised use of ID can also be implemented. Compatible ie6+ for mobile phone tab simple no script required
In fact, can also use Css3:target implementation, here is not much to do introduction, the principle is similar, are anchor points, compatible with ie9+
Here is the source code copy observation
<!doctype html>
<meta charset= "Utf-8" >
<title>css Tab 2</title>
<body>
<div id= "Content" >
<ul>
<li><a href= "#tab1" >1</a></li>
<li><a href= "#tab2" >2</a></li>
<li><a href= "#tab3" >3</a></li>
</ul>
<div class= "Tabcontent" >
<div id= "Tab1" >111111</div>
<div id= "TaB2" >22222</div>
<div id= "Tab3" >33333333</div>
</div>
</div>
<style>
#content {width:400px; height:400px; position:relative; border:1px solid #666;}
#content ul{margin:0; padding:0; position:absolute; list-style:none;}
#content ul li{List-style:none;}
#content ul li a{display:block; color: #CCC; padding:4px;}
. tabcontent{height:400px; overflow:hidden;}
. tabcontent div{width:400px; height:400px;}
#tab1 {background:red;}
#tab2 {background:green;}
#tab3 {background:blue;}
</style>
</body>
CSS Tab TAB 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
