首页>>TAB标签>>响应式tab，支持关闭某个项目，自动循环打开(2015-11-23)

响应式tab，支持关闭某个项目，自动循环打开

响应式tab，支持关闭某个项目，自动循环打开
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="horizontalTab">  
  2.         <ul>  
  3.             <li><a href="#tab-1">Responsive Tab-1</a></li>  
  4.             <li><a href="#tab-2">Responsive Tab-2</a></li>  
  5.             <li><a href="#tab-3">Responsive Tab-3</a></li>  
  6.             <li><a href="#tab-4">Responsive Tab-4</a></li>  
  7.             <li><a href="#tab-5">Responsive Tab-5</a></li>  
  8.         </ul>  
  9.   
  10.         <div id="tab-1">  
  11.             <p>freejs.net</p>  
  12.         </div>  
  13.         <div id="tab-2">  
  14.             <p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>  
  15.         </div>  
  16.         <div id="tab-3">  
  17.             <p>tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab</p>  
  18.         </div>  
  19.         <div id="tab-4">  
  20.             <p>翻页,分页，无刷新翻页,jquery翻页 本站演示中的分页数据库结构都一样的</p>  
  21.         </div>  
  22.         <div id="tab-5">  
  23.             <p>jquery文字特效,js文字特效,包括一些其他js库的，例如mootools</p>  
  24.         </div>  
  25.   
  26.     </div>  
  27.   
  28.     <p><button id="start-rotation">Start Rotation</button> <button id="stop-rotation">Stop Rotation</button> </p>  
  29.     <p>  
  30.         <button class="select-tab" value="0">1</button>  
  31.         <button class="select-tab" value="1">2</button>  
  32.         <button class="select-tab" value="2">3</button>  
  33.         <button class="select-tab" value="3">4</button>  
  34.         <button class="select-tab" value="4">5</button>  
  35.     <p>  
  36.     <p><button id="enable-tab">Enable Tab 4</button> <button id="disable-tab">Disable Tab 4</button> </p>  
  37.   
  38.     <p class="info"></p>  
  39.   
  40.   
  41.     <!-- jQuery with fallback to the 1.* for old IE -->  
  42.     <!--[if lt IE 9]>  
  43.         <script src="js/jquery-1.11.0.min.js"></script>  
  44.     <![endif]-->  
  45.     <!--[if gte IE 9]><!-->  
  46.         <script src="js/jquery-2.1.0.min.js"></script>  
  47.     <!--<![endif]-->  
  48.   
  49.     <!-- Responsive Tabs JS -->  
  50.     <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>  
  51.   
  52.     <script type="text/javascript">  
  53.         $(document).ready(function () {  
  54.             var $tabs = $('#horizontalTab');  
  55.             $tabs.responsiveTabs({  
  56.                 rotate: false,  
  57.                 startCollapsed: 'accordion',  
  58.                 collapsible: 'accordion',  
  59.                 setHash: true,  
  60.                 disabled: [3,4],  
  61.                 activate: function(e, tab) {  
  62.                     $('.info').html('Tab <strong>' + tab.id + '</strong> activated!');  
  63.                 },  
  64.                 activateState: function(e, state) {  
  65.                     //console.log(state);  
  66.                     $('.info').html('Switched from <strong>' + state.oldState + '</strong> state to <strong>' + state.newState + '</strong> state!');  
  67.                 }  
  68.             });  
  69.   
  70.             $('#start-rotation').on('click', function() {  
  71.                 $tabs.responsiveTabs('startRotation', 1000);  
  72.             });  
  73.             $('#stop-rotation').on('click', function() {  
  74.                 $tabs.responsiveTabs('stopRotation');  
  75.             });  
  76.             $('#start-rotation').on('click', function() {  
  77.                 $tabs.responsiveTabs('active');  
  78.             });  
  79.             $('#enable-tab').on('click', function() {  
  80.                 $tabs.responsiveTabs('enable', 3);  
  81.             });  
  82.             $('#disable-tab').on('click', function() {  
  83.                 $tabs.responsiveTabs('disable', 3);  
  84.             });  
  85.             $('.select-tab').on('click', function() {  
  86.                 $tabs.responsiveTabs('activate', $(this).val());  
  87.             });  
  88.   
  89.         });  
  90.     </script>  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_532.html