jQuery+CSS實現(xiàn)的標簽頁效果示例【測試可用】
本文實例講述了jQuery+CSS實現(xiàn)的標簽頁效果。分享給大家供大家參考,具體如下:
CSS代碼:
#tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20px; padding:0; } #tabs li{ width:80px; height:40px; line-height:40px; display:inline-block; text-align:center; border-bottom:1px solid grey; border-top-left-radius:5px; border-top-right-radius:5px; background:#eeeeee; position:relative; top:1px; } #tabs li:hover{ color:#aaaaaa; cursor:pointer; } .items{ width:560px; height:175px; font-size:16px; text-align:center; border:1px solid grey; float:left; margin-left:20px; }
jQuery代碼:
$(document).ready(function(){ $("li").bind("click",function(){ $(".items").hide(); $("#"+$(this).attr("name")).show(); $("li").css({ "border-top":"1px solid white", "border-left":"1px solid white", "border-right":"1px solid white", "border-bottom":"1px solid grey", "background":"#eeeeee" }); $(this).css({ "border-top":"1px solid grey", "border-left":"1px solid grey", "border-right":"1px solid grey", "border-bottom":"1px solid white", "background":"white" }); }); $("li:first-child").click(); });
HTML部分代碼:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div id="tabs"> <ul> <li name="lst1">標簽1</li> <li name="lst2">標簽2</li> <li name="lst3">標簽3</li> <li name="lst4">標簽4</li> </ul> <div class="items" id="lst1">內容1</div> <div class="items" id="lst2">內容2</div> <div class="items" id="lst3">內容3</div> <div class="items" id="lst4">內容4</div> </div>
這里使用在線HTML/CSS/JavaScript前端代碼調試運行工具:http://tools.jb51.net/code/WebCodeRun,測試運行效果如下:
感興趣的朋友可以動手測試一下看看效果如何。
PS:或者還可以將上述代碼組合成完成的HTML頁面,再使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun,測試運行效果。
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jquery實現(xiàn)ajax提交form表單的方法總結
本篇文章主要是對jquery實現(xiàn)ajax提交form表單的方法進行了總結介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03基于jquery實現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05基于jQuery實現(xiàn)動態(tài)數(shù)字展示效果
Jq數(shù)據(jù)列表動態(tài)效果,動態(tài)更新,支持Ajax動態(tài)刷新。下面小編給大家介紹下基于jQuery實現(xiàn)動態(tài)數(shù)字展示效果,需要的朋友可以參考下2015-08-08jquery輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06jQuery實現(xiàn)單擊彈出Div層窗口效果(可關閉可拖動)
這篇文章主要介紹了jQuery實現(xiàn)單擊彈出Div層窗口效果,具有可關閉可拖動的功能,涉及jQuery響應鼠標事件動態(tài)變換頁面元素樣式的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09