Home > Developer > JavaScript
Create tabs and create axure tabs
<! Doctype html> /* Reset */
* {Padding: 0; margin: 0;} div # tabs {width: 600px; height: 400px; margin: 100px auto; position: relative ;}. tab {width: 100px; height: 50px; position: absolute; top: 0;} input. tab {z-index: 11; opacity: 0; cursor: pointer;}. tab {z-index: 10; text-align: center; line-height: 50px; text-decoration: none; color: black; font-size: 30px ;}. tab1 {left: 0px ;}. tab2 {left: 100px ;}. tab3 {left: 200px;}/* move the mouse over */input. tab: Hover + a {background-color: # ccc;}/* click */input. tab: checked + a {border: 1px solid # ccc; border-bottom: none; background-color: white;}/* scroll setting */div # scroll {position: absolute; top: 50px; width: 100%; height: 350px; border: 1px solid # ccc; overflow: hidden;} div # scroll> div. content {width: 100%; height: 100%; position: absolute; top: 0; left: 100%; padding: 15px; transition: all 0.6 s linear;} input. tab1: chec Ked ~ Div # scroll> div. content1, input. tab2: checked ~ Div # scroll> div. content2, input. tab3: checked ~ Div # scroll> div. content3 {left: 0% ;} </style> <body> <div id = "tabs"> <input type = "radio" name = "tab" class = "tab tab1" checked/> <a href = "#" class = "tab tab1"> Option 1 </a> <input type = "radio" name = "tab" class = "tab tab2"/> <a href = "#" class = "tab tab2"> Option 2 </a> <input type = "radio" name = "tab" class = "tab tab3"/> <a href = "#" class = "tab tab3"> Option 3 </a> <div id = "scroll"> <div class = "content content1"> hahaha 111 <br/> haha 111 <br/> Haha 111 <br/> Haha 111 <br/> Haha 111 <br/> </div> <div class = "content content2"> Haha 222 <br /> Haha 222 <br/> Haha 222 <br/> Haha 222 <br/> Haha 222 <br/> </div> <div class = "content content3"> haha 333 <br/> Haha 333 <br/> Haha 333 <br/> Haha 333 <br/> Haha 333 <br/> </div>> </body>
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
