jQuery+CSS實(shí)現(xiàn)的標(biāo)簽頁(yè)效果示例【測(cè)試可用】
本文實(shí)例講述了jQuery+CSS實(shí)現(xiàn)的標(biāo)簽頁(yè)效果。分享給大家供大家參考,具體如下:
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">標(biāo)簽1</li> <li name="lst2">標(biāo)簽2</li> <li name="lst3">標(biāo)簽3</li> <li name="lst4">標(biāo)簽4</li> </ul> <div class="items" id="lst1">內(nèi)容1</div> <div class="items" id="lst2">內(nèi)容2</div> <div class="items" id="lst3">內(nèi)容3</div> <div class="items" id="lst4">內(nèi)容4</div> </div>
這里使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:http://tools.jb51.net/code/WebCodeRun,測(cè)試運(yùn)行效果如下:
感興趣的朋友可以動(dòng)手測(cè)試一下看看效果如何。
PS:或者還可以將上述代碼組合成完成的HTML頁(yè)面,再使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun,測(cè)試運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery tab標(biāo)簽頁(yè)的制作
- 基于jQuery實(shí)現(xiàn)多標(biāo)簽頁(yè)切換的效果(web前端開發(fā))
- jQuery實(shí)現(xiàn)簡(jiǎn)單的tab標(biāo)簽頁(yè)效果
- JQuery標(biāo)簽頁(yè)效果實(shí)例詳解
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁(yè)功能的方法
- jqueryUI tab標(biāo)簽頁(yè)代碼分享
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
- jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果
相關(guān)文章
jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
本篇文章主要是對(duì)jquery實(shí)現(xiàn)ajax提交form表單的方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05基于jQuery實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果
Jq數(shù)據(jù)列表動(dòng)態(tài)效果,動(dòng)態(tài)更新,支持Ajax動(dòng)態(tài)刷新。下面小編給大家介紹下基于jQuery實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果,需要的朋友可以參考下2015-08-08jquery 動(dòng)態(tài)調(diào)整textarea高度
用jquery實(shí)現(xiàn)的調(diào)整textarea高度的實(shí)現(xiàn)代碼。這個(gè)動(dòng)畫效果比較流暢。適合新手學(xué)習(xí)。2009-11-11jQuery基于正則表達(dá)式的表單驗(yàn)證功能示例
這篇文章主要介紹了jQuery基于正則表達(dá)式的表單驗(yàn)證功能,包括針對(duì)字符串、郵件、網(wǎng)址、電話等常見正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-01-01jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery遮罩層相關(guān)屬性樣式動(dòng)態(tài)控制操作技巧,需要的朋友可以參考下2018-09-09jQuery與getJson結(jié)合的用法實(shí)例
這篇文章主要介紹了jQuery與getJson結(jié)合的用法,實(shí)例分析了jquery解析json數(shù)據(jù)及數(shù)組遍歷的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
這篇文章主要介紹了jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果,具有可關(guān)閉可拖動(dòng)的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09