首页>>TAB标签>>响应式Tabs选项卡 PC端垂直显示，移动端水平显示(2020-02-26)

响应式Tabs选项卡 PC端垂直显示，移动端水平显示

响应式Tabs选项卡 PC端垂直显示，移动端水平显示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="tabs-vertical">  
  2.   <ul>  
  3.     <li> <a class="tab-active" data-index="0" href="#">导航菜单</a> </li>  
  4.     <li> <a data-index="1" href="#">TAB标签</a> </li>  
  5.     <li> <a data-index="2" href="#">分页</a> </li>  
  6.   </ul>  
  7.   <div class="tabs-content-placeholder">  
  8.     <div class="tab-content-active">  
  9.       <p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>  
  10.     </div>  
  11.     <div>  
  12.       <p>tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab</p>  
  13.     </div>  
  14.     <div>  
  15.       <p>翻页,分页，无刷新翻页,jquery翻页 本站演示中的分页数据库结构都一样的 </p>  
  16.     </div>  
  17.   </div>  
  18. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3.         $(document).ready(function() {  
  4.   
  5.             var widget = $('.tabs-vertical');  
  6.   
  7.             var tabs = widget.find('ul a'),  
  8.                 content = widget.find('.tabs-content-placeholder > div');  
  9.   
  10.             tabs.on('click', function (e) {  
  11.   
  12.                 e.preventDefault();  
  13.   
  14.                 // Get the data-index attribute, and show the matching content div  
  15.   
  16.                 var index = $(this).data('index');  
  17.   
  18.                 tabs.removeClass('tab-active');  
  19.                 content.removeClass('tab-content-active');  
  20.   
  21.                 $(this).addClass('tab-active');  
  22.                 content.eq(index).addClass('tab-content-active');  
  23.   
  24.             });  
  25.   
  26.         });  
  27.   
  28.     </script>  

 


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