快捷導航

jquery ui 實現(xiàn) tab標簽功能示例【測試可用】

更新時間：2019年07月25日 10:46:23 作者：xshang

這篇文章主要介紹了jquery ui 實現(xiàn) tab標簽功能,結(jié)合完整實例形式分析了jquery ui 實現(xiàn) tab標簽切換功能的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jquery ui 實現(xiàn) tab標簽功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
  <title>www.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>

運行效果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
這篇文章主要介紹了jQuery實現(xiàn)checkbox全選、反選及刪除等操作的方法,結(jié)合實例形式形式詳細分析了jQuery針對checkbox多選按鈕常見批量操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-08-08
jQuery拖拽插件gridster使用指南
gridster.js是一款基于jquery的前端拖拽插件，效果相當?shù)牟诲e，大家可以先看看Demo(http://gridster.net/#intro)（藍色部分的白塊就是了，可以隨便拖動，娛樂性很強）。
2015-04-04
jquery設(shè)置表單元素為不可用的簡單代碼
下面小編就為大家?guī)硪黄猨query設(shè)置表單元素為不可用的簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
jQuery 相關(guān)控件的事件操作分解
JQuery是非常棒的JS類庫，有豐富的UI庫和插件，不過我鐘愛他的是他的選擇器，感覺其他功能有時跟后臺人員距離很遠，所以一般我也只使用一下他的選擇器。
2009-08-08
11款新鮮的jQuery插件[附所有demo下載]
每天都會有新的jQuery插件誕生，這里和大家分享最新出爐的11款在實際項目中可能用到的jQuery插件，提供整理后的實例下載。
2011-01-01
jQuery中trigger()方法用法實例
這篇文章主要介紹了jQuery中trigger()方法用法,實例分析了trigger()方法的功能、定義及觸發(fā)匹配元素指定類型事件的使用技巧,需要的朋友可以參考下
2015-01-01
jquery實現(xiàn)點擊瀏覽器返回上一頁按鈕并能直接刷新
這篇文章主要介紹了jquery實現(xiàn)點擊瀏覽器返回上一頁按鈕并能直接刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
原生JS和jQuery版實現(xiàn)文件上傳功能
這篇文章主要介紹了HTML5中用js、jQuery結(jié)合Ajax實現(xiàn)文件上傳功能，HTML5中已經(jīng)可以用Ajax上傳文件了，而且代碼簡單，借助 FormData類即可發(fā)送文件數(shù)據(jù)，感興趣的小伙伴們可以參考一下
2016-04-04
JQuery 文本框回車跳到下一個文本框示例代碼
回車執(zhí)行跳到下一個文本框，在本文通過jquery簡單實現(xiàn)下，需要的朋友可以參考下
2013-08-08
基于jQuery的可用于選項卡及幻燈的切換插件
最近公司項目頁面中用到選項卡與幻燈比較多，特地寫了個集選項卡、幻燈片與播放控制于一體的插件，同頁面可多次使用。
2011-03-03