Pure CSS to achieve a beautiful tab tab switch effects

 <! DOCTYPE Html>

&lt;html lang= "en" &gt; &lt;head&gt; &lt;meta charset= UTF-8 "&gt; &lt;title&gt;pure css3 tab&lt;/title&gt; &lt;style Type= "Text/css" &gt; *{margin:0; padding:0; body{font-size:14px; line-height:2;} Li{list-style:none;} a{color: #666; Text-decoration:none;} A:hover{color: #f00; sidebar{width:80%; margin:0 auto; Inline-ul {font-size:0;/* all browsers/*word-spacing:-1px;/* IE6, 7/}. Inline-ul ul li{font-size:12px; letter-spacing:normal; word-spacing:normal; vertical-align:top; display:inlin E-block; *display:inline; *zoom:1; @media screen and (-webkit-min-device-pixel-ratio:0) {/* Firefox letter-spacing can cause horizontal displacement of elements that are detached from the normal stream. inline-ul{letter- spacing:-5px;/* Safari and so on do not support a font size of 0 browser, N according to the parent font adjustment/}}. widget-title {font-size:13px; font-weight:normal; color: #88 8888; padding:20px 20px 0px; }. Widget-tab. widget-title{font-size:0. Widget-tab. widget-box{margin:0 20px 20px;background: #F7F7F7} widget-tab widget-title ul li{margin-left:0;width:30%;text-align:center;margin-right:1.3%;p adding:8px 1%;} . widget-tab. Widget-title ul li:hover{background: #F7F7F7} widget-tab. Widget-title label{cursor:pointer;display: Block font-size:14px;} . widget-tab. Widget-title ul li.active{background: #F7F7F7}. Widget-tab Input{display:none} widget-tab. Widget-box ul{ Display:none} #new: Checked ~ widget-title. New, #hot: Checked ~ widget-title. Hot, #random: Checked ~ widget-title. Random{background: #F7F7F7} #new: Checked ~ widget-box new-list, #hot: Checked ~ widget-box. Hot-list, #random: Checked ~ . Widget-box. Random-list{display:block}. Widget-box ul li a{padding-left:20px; &lt;/style&gt; &lt;/head&gt; &lt;body& Gt &lt;div class= "sidebar" &gt; &lt;div class= "widget Widget-tab" &gt; &lt;input type= "Radio" name= "Widget-tab" id= "new" checked= "Checked"/&gt; &lt;input type= "Radio" name= "Widget-tab" id= "hot"/&gt; &lt;input type= "Radio" name= "Widget-tab" "id=" random "/&gt; &lt;div class=" Widget-title inline-ul "&gt; &lt;ul&gt; &lt;li class=" new "&gt; &lt;label for=" New "&gt; Latest Posts &lt;/label&gt; &lt;/li&gt; &lt;li class= "Hot" &gt; &lt;label for= "Warm" &gt; Thermal review Bowen &lt;/label&gt; &lt;/li&gt; &lt;li class= " Random "&gt; &lt;label for=" Random "&gt; Random posts &lt;/label&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class=" Widget-box "&gt; &lt;ul class=" new-list "&gt; &lt;li&gt; &lt;a href="/wordpress-popular-view-posts.html "title=" " Original WordPress Theme Tutorial #4: Popular Click article "Fixed link" &gt; original wordpress Theme Tutorial #4: Hot Click articles &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= " Wordpress-feature-posts.html "title=" "Original WordPress Theme Tutorials #3: Featured Articles" Fixed links "&gt; original WordPress Theme Tutorials #3: Featured Articles &lt;/a&gt; &lt; /li&gt; &lt;li&gt; &lt;a href= "/wordpress-sticky-posts.html" "title=" "Original WordPress Theme Tutorials: Top Recommended article" "Fixed link" &gt; Original WordPress Theme Tutorials: Top Recommended articles &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/wordpress-recent-update-posts-2.html" title= "" Original WordPress Theme Tutorial #: Recently modified article "fixed link" &gt; original wordpress Theme Tutorial #: Recently modified articles &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul class= ' Hot-list "&gt; &lt;li&gt; &lt;a href="/how-i-learn-javascript.html title= "How I learn JavaScript" &gt; How I learn JavaScript &lt;/a&gT &lt;/li&gt; &lt;li&gt; &lt;a href= "/my-seo-topic.html" title= "on Modern Search Engine optimization (SEO)" &gt; On modern Search engine optimization (SEO) &lt;/a&gt; &lt;/ li&gt; &lt;li&gt; &lt;a href= "/10-best-free-jquery-mobile-theme.html" title= "10 excellent jquery Mobile Themes" &gt;10 an excellent jquery Mobile Themes &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/js-create-object.html" title= "JavaScript Learning 15: Creating Objects" &gt; JavaScript Learning 15: Creating Objects &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/javascript-object-2.html" title= Comprehensive understanding of object-oriented JavaScript "&gt; Comprehensive understanding of object-oriented javascript&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="/swipe.html "title=" Mobile End Touch Sliding plugin swipe.js "&gt; Mobile end Touch Sliding plugin swipe.js&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="/css-slide.html "title=" Pure CSS Slides &gt; Pure css Slides &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/nodejs-roll-back.html" title= Win7 installation Nodejs and solutions "&gt;win7 not installed Nodejs and solutions &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul class=" random-list "&gt; &lt;li&gt; &lt;a href=" 693.html "title=" How to use the font awesome font "target=" _blank on PS &gt; How to use font awesome font &lt;/a&gt; &lt;/li&gt; &lt; on PSli&gt; &lt;a href= "/wordpress-recent-update-posts-2.html" title= "original WordPress Theme Tutorial #: Recently modified article ' target= ' _blank ' &gt; Original WordPress Theme Tutorials: Recently modified articles &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/learn-bootstrap.html" title= " Bootstrap learning and use experience summary "target=" _blank "&gt;bootstrap learning and use experience summary &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=" Css3-selection.html "title=" uses CSS3 to change the color of selected text "target= _blank" &gt; Use CSS3 to change the color of selected text &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/js-function-5.html" title= "Js15-5:javascript Inheritance" target= "_blank" &gt;js15-5:javascript inheritance &lt;/a&gt; &lt; /li&gt; &lt;li&gt; &lt;a href= "/2012-2.html" title= "4.20-6.11, busy interviewing, thinking about the future" target=, busy interview, thinking about the future &lt; /a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/grunt.html" title= "Grunt: Task Run Manager" target= "_blank" &gt;grunt: Task Run manager &lt;/a &gt; &lt;/li&gt; &lt;li&gt; &lt;a href= "/sublime-text2-dump.html" title= "sublime text2 Open file for dump format" target= "_blank" &gt;sublime text2 Open file for dump format &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &LT;/BODY&GT &lt;/html&gt;&lt;/td&gt; &nbsp;&lt;/tr&gt; &lt;/table&gt;