CSS-only tabs implement 5 different switching corresponding content effects, csstab

CSS-only tabs implement 5 different switching corresponding content effects, csstab

 

 

A very common special effect that completes the tab with pure CSS to implement 5 different switching corresponding content Effects

Instance Preview

Instance code

 

<Div class = "main"> <ul class = "tabs"> <li> <input type = "radio" checked name = "tabs" id = "tab1"> <label for = "tab1"> tab 1 </label> <div id = "tab-content1" class = "tab-content animated fadeIn"> <a href = '#'> jQuery + jRange select the value range widget _ Drag the value range </a> <p> This article uses two examples to introduce a Range selector plug-in jRange. </P> </div> </li> <input type = "radio" checked name = "tabs" id = "tab2"> <label for = "tab2 "> tab 2 </label> <div id =" tab-content2 "class =" tab-content animated fadeIn "> <a href = '#'> using jsonp cross-origin access under jquery method </a> <p> This article describes how to use getJSON to Implement Asynchronous cross-origin submission forms. </P> </div> </li> <input type = "radio" checked name = "tabs" id = "tab3"> <label for = "tab3 "> tab 3 </label> <div id =" tab-content3 "class =" tab-content animated fadeIn "> <a href = '#'> Flowplayer simple and cool video player </a> <p> Flowplayer is a free WEB video player. It supports playing flv, swf, and other streaming media and image files. It can play video files smoothly and supports custom configurations and extensions. </P> </div> </li> </ul> </div>