jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能示例【測試可用】
更新時間：2019年07月25日 10:46:23 作者：xshang
這篇文章主要介紹了jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能,結(jié)合完整實(shí)例形式分析了jquery ui 實(shí)現(xiàn) tab標(biāo)簽切換功能的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<title>m.fzitv.net tab切換</title>
<style type="text/css">
#tabs{
width:500px;
height:500px;
margin:0 auto;
}
.ui-widget-header{
border:1px solid grey;
background:grey;
color:#fff;
font-weight:bold;
}
</style>
<link rel="stylesheet" rel="external nofollow" media="screen"/>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1" rel="external nofollow" >first tab</a></li>
<li><a href="#tabs-2" rel="external nofollow" >second tab</a></li>
</ul>
<div id="tabs-1">
<p>this is the first tab</p>
</div>
<div id="tabs-2">
<p>this is the second tab</p>
</div>
</div>
<script>
$(function(){
$("#tabs").tabs();
});
</script>
</body>
</html>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法,結(jié)合實(shí)例形式形式詳細(xì)分析了jQuery針對checkbox多選按鈕常見批量操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-08-08
gridster.js是一款基于jquery的前端拖拽插件，效果相當(dāng)?shù)牟诲e，大家可以先看看Demo(http://gridster.net/#intro)（藍(lán)色部分的白塊就是了，可以隨便拖動，娛樂性很強(qiáng)）。2015-04-04
下面小編就為大家?guī)硪黄猨query設(shè)置表單元素為不可用的簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JQuery是非常棒的JS類庫，有豐富的UI庫和插件，不過我鐘愛他的是他的選擇器，感覺其他功能有時跟后臺人員距離很遠(yuǎn)，所以一般我也只使用一下他的選擇器。2009-08-08![11款新鮮的jQuery插件[附所有demo下載]](http://img.jbzj.com/images/xgimg/bcimg4.png)
每天都會有新的jQuery插件誕生，這里和大家分享最新出爐的11款在實(shí)際項(xiàng)目中可能用到的jQuery插件，提供整理后的實(shí)例下載。2011-01-01
這篇文章主要介紹了jQuery中trigger()方法用法,實(shí)例分析了trigger()方法的功能、定義及觸發(fā)匹配元素指定類型事件的使用技巧,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁按鈕并能直接刷新
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊瀏覽器返回上一頁按鈕并能直接刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
原生JS和jQuery版實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了HTML5中用js、jQuery結(jié)合Ajax實(shí)現(xiàn)文件上傳功能，HTML5中已經(jīng)可以用Ajax上傳文件了，而且代碼簡單，借助 FormData類即可發(fā)送文件數(shù)據(jù)，感興趣的小伙伴們可以參考一下2016-04-04
回車執(zhí)行跳到下一個文本框，在本文通過jquery簡單實(shí)現(xiàn)下，需要的朋友可以參考下2013-08-08
基于jQuery的可用于選項(xiàng)卡及幻燈的切換插件
最近公司項(xiàng)目頁面中用到選項(xiàng)卡與幻燈比較多，特地寫了個集選項(xiàng)卡、幻燈片與播放控制于一體的插件，同頁面可多次使用。2011-03-03