官網地址：點擊這里進入官網

資源導入

<link rel="stylesheet" href="b.tabs.css" type="text/css"> <!-- 插件核心腳本 --> <script type="text/javascript" src="b.tabs.js" ></script> <!-- 插件拖動效果腳本 --> <script type="text/javascrpt" src="jquery-ui.min.js"></script>

HTML代碼?

<!-- 菜單導航，非必須，具體使用時更換為具體的管件 --> <div class="span2"><div class="well menuSideBar" style="padding: 8px 0px;"><ul class="nav nav-list" id="menuSideBar"><li class="nav-header">導航菜單</li><li class="divider"></li><li mid="tab1" funurl="${webroot}demo/manage/tabsPage1"><a tabindex="-1" href="javascript:void(0);">頁面1</a></li><li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a tabindex="-1" href="javascript:void(0);">頁面2</a></li><li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a tabindex="-1" href="javascript:void(0);">頁面3</a></li></ul></div> </div> <!-- 標簽頁區域 --> <div class="span10" id="mainFrameTabs"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><!-- 設置默認的首頁標簽頁，設置noclose樣式，則不會被關閉 --><li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首頁</a></li></ul><!-- Tab panes --><div class="tab-content"><!-- 默認標簽頁（首頁）的內容區域 --><div class="tab-pane active" id="bTabs_navTabsMainPage"><div class="page-header"><h2 style="font-size: 31.5px;text-align: center;font-weight: normal;">歡迎使用</h2></div><div style="text-align: center;font-size: 20px;line-height: 20px;">Welcome to use bTabs plugin!</div></div></div></div>

Javascript初始化插件代碼?

//導航區域項目點擊增加標簽頁處理 //僅演示功能 $('a',$('#menuSideBar')).on('click', function(e) {e.stopPropagation();var li = $(this).closest('li');var menuId = $(li).attr('mid');var url = $(li).attr('funurl');var title = $(this).text();//校驗登錄是否超時，通常使用ajax訪問服務端測試登錄是否超時//若頁面端已有超時自動跳轉的處理，則不需要設置該回調var checkLogin = function(){....};$('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin); });//插件的初始化 $('#mainFrameTabs').bTabs({//登錄界面URL，用于登錄超時后的跳轉'loginUrl' : 'http://xxx.com/login',//用于初始化主框架的寬度高度等，另外會在窗口尺寸發生改變的時候，也自動進行調整'resize' : function(){//這里只是個樣例，具體的情況需要計算$('#mainFrameTabs').height(100);} });

官方使用效果

總結

以上是生活随笔為你收集整理的使用Jquery插件bTabs实现多页签打开效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。