執行個體一
效果圖
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>radio選項卡切換</title> <style type="text/css"> *{margin:0;padding:0;} .test-box{width: 50%;margin: 10px auto 0;padding-top: 25px;position: relative;} .test-box>.test-tab{width:100%;} .test-box .test-label{background-color: #eee;display: inline-block;width: 25%;text-align: center;font-size: 16px;line-height: 24px;box-sizing: border-box;} .test-label{position: absolute;top: 0;border:solid #ccc; border-width:1px 0px 1px 1px;} .test-tab:nth-child(1) .test-label{left: 0;} .test-tab:nth-child(2) .test-label{left: 25%;} .test-tab:nth-child(3) .test-label{left: 50%;} .test-tab:last-child .test-label{border-right-width:1px;} .test-box .content{background-color: #fff;height: 20px;display: none;border:1px solid #ccc;} .test-box input.test-radio{display: none;} .test-box input:checked~.test-label{background-color: #fff;border-bottom: 1px solid #fff;} .test-box input:checked~.content{display: block;} </style></head><body> <div> <div> <input type="radio" id="radio1" name="test-radio" checked> <label for="radio1">選項卡1</label> <div><P>asdasdsad1</P></div> </div> <div> <input type="radio" id="radio2" name="test-radio"> <label for="radio2">選項卡2</label> <div><P>asdasdsad2</P></div> </div> <div> <input type="radio" id="radio3" name="test-radio"> <label for="radio3">選項卡3</label> <div><P>asdasdsad3</P></div> </div> </div></body></html>
執行個體二 純CSS實現漂亮tab選項卡切換特效
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>pure css3 tab</title><style type="text/css">*{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;/* 所有瀏覽器 */*word-spacing:-1px;/* IE6、7 */}.inline-ul ul li{font-size: 12px;letter-spacing: normal;word-spacing: normal;vertical-align:top;display: inline-block;*display:inline;*zoom:1;}@media screen and (-webkit-min-device-pixel-ratio:0){/* firefox 中 letter-spacing 會導致脫離普通流的元素水平位移 */.inline-ul{letter-spacing:-5px;/* Safari 等不支援字型大小為 0 的瀏覽器, N 根據父級字型調節*/}}.widget-title {font-size: 13px;font-weight: normal;color: #888888;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%;padding: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;}</style></head><body><div><div class="widget widget-tab"><input type="radio" name="widget-tab" id="new" checked="checked"/><input type="radio" name="widget-tab" id="hot"/><input type="radio" name="widget-tab" id="random"/><div class="widget-title inline-ul"><ul><li><label for="new">最新博文</label></li><li><label for="hot">熱評博文</label></li><li><label for="random">隨機博文</label></li></ul></div><div><ul><li><a href="/wordpress-popular-view-posts.html" title="“原創WordPress主題教程#4：熱門點擊文章”的固定連結">原創WordPress主題教程#4：熱門點擊文章</a></li><li><a href="/wordpress-feature-posts.html" title="“原創WordPress主題教程#3：精選推薦文章”的固定連結">原創WordPress主題教程#3：精選推薦文章</a></li><li><a href="/wordpress-sticky-posts.html" title="“原創WordPress主題教程#2：置頂推薦文章”的固定連結">原創WordPress主題教程#2：置頂推薦文章</a></li><li><a href="/wordpress-recent-update-posts-2.html" title="“原創WordPress主題教程#1：最近修改文章”的固定連結">原創WordPress主題教程#1：最近修改文章</a></li></ul><ul><li><a href="/how-i-learn-javascript.html" title="我是如何學習JavaScript">我是如何學習JavaScript</a></li><li><a href="/my-seo-topic.html" title="淺談現代化搜尋引擎最佳化（SEO）">淺談現代化搜尋引擎最佳化（SEO）</a></li><li><a href="/10-best-free-jquery-mobile-theme.html" title="10個優秀的jQuery Mobile主題">10個優秀的jQuery Mobile主題</a></li><li><a href="/js-create-object.html" title="javascript學習15：建立對象">javascript學習15：建立對象</a></li><li><a href="/javascript-object-2.html" title="全面理解物件導向的 JavaScript">全面理解物件導向的 JavaScript</a></li><li><a href="/swipe.html" title="移動端觸摸滑動外掛程式swipe.js">移動端觸摸滑動外掛程式swipe.js</a></li><li><a href="/css-slide.html" title="純CSS投影片">純CSS投影片</a></li><li><a href="/nodejs-roll-back.html" title="win7安裝不了nodejs及解決方案">win7安裝不了nodejs及解決方案</a></li></ul><ul><li><a href="/693.html" title="如何在PS上使用Font Awesome字型" target="_blank">如何在PS上使用Font Awesome字型</a></li><li><a href="/wordpress-recent-update-posts-2.html" title="原創WordPress主題教程#1：最近修改文章" target="_blank">原創WordPress主題教程#1：最近修改文章</a></li><li><a href="/learn-bootstrap.html" title="bootstrap學習和使用的經驗總結" target="_blank">bootstrap學習和使用的經驗總結</a></li><li><a href="/css3-selection.html" title="使用css3改變選中文本的顏色" target="_blank">使用css3改變選中文本的顏色</a></li><li><a href="/js-function-5.html" title="js15-5:javascript繼承" target="_blank">js15-5:javascript繼承</a></li><li><a href="/2012-2.html" title="4.20-6.11,忙碌面試，思考前途" target="_blank">4.20-6.11,忙碌面試，思考前途</a></li><li><a href="/grunt.html" title="GRUNT:任務運行管理器" target="_blank">GRUNT:任務運行管理器</a></li><li><a href="/sublime-text2-dump.html" title="sublime text2開啟檔案為dump格式" target="_blank">sublime text2開啟檔案為dump格式</a></li></ul></div></div></div></body></html>
執行個體三 CSS radio單選框下的選項卡轉場效果執行個體頁面CSS代碼：
.test_box { width: 50%; min-height: 250px; margin: 1em auto; position: relative;}.test_tab { width: 25%; margin-right: -1px; border: 1px solid #ccc; border-bottom: 0; float: left;}.test_label { display: block; padding-top: 5px; padding-bottom: 5px; background-color: #eee; text-align: center;}.test_radio,.test_tab_content { position: absolute; left: -999em;}.test_radio:checked ~ .test_tab_content { margin-top: -1px; padding: 1em 2em; border: 1px solid #ccc; left: 0; right: 0;}.test_radio:checked ~ .test_label { background-color: #fff; border-bottom: 1px solid #fff; position: relative; z-index: 1;}
HTML代碼：
<div> <div> <input type="radio" id="testTabRadio1" name="tab" checked="checked" /> <label for="testTabRadio1">選項卡1</label> <div> <p>我是選項卡1對應的美女</p> <img src="/image/study/s/s128/mm1.jpg" /> </div> </div> <div> <input type="radio" id="testTabRadio2" name="tab" /> <label for="testTabRadio2">選項卡2</label> <div> <p>我是選項卡2對應的美女</p> <img src="/image/study/s/s128/mm2.jpg" /> </div> </div> <div> <input type="radio" id="testTabRadio3" name="tab" /> <label for="testTabRadio3">選項卡3</label> <div> <p>我是選項卡3對應的美女</p> <img src="/image/study/s/s128/mm3.jpg" /> </div> </div></div>
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
