首页>>TAB标签>>2个简单的tab标签，可以控制水平或者垂直显示(2013-12-22)

2个简单的tab标签，可以控制水平或者垂直显示

2个简单的tab标签，可以控制水平或者垂直显示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="horizontalTab">  
  2. <ul class="resp-tabs-list">  
  3. <li>Responsive Tab-1</li>  
  4. <li>Responsive Tab-2</li>  
  5. <li>Responsive Tab-3</li>  
  6. </ul>  
  7. <div class="resp-tabs-container">  
  8. <div>  
  9. <p>1</p>  
  10. </div>  
  11. <div>  
  12. <p>2</p>  
  13. </div>  
  14. <div>  
  15. <p>3</p>  
  16. </div>  
  17. </div>  
  18. </div>  
  19. <br />  
  20. <br />  
  21. <!--vertical Tabs-->  
  22. <div id="verticalTab">  
  23. <ul class="resp-tabs-list">  
  24. <li>Responsive Tab 1</li>  
  25. <li>Responsive Tab 2</li>  
  26. <li>Responsive Tab 3</li>  
  27. <li>Long name Responsive Tab 4</li>  
  28. </ul>  
  29. <div class="resp-tabs-container">  
  30. <div>  
  31. <p>1</p>  
  32. </div>  
  33. <div>  
  34. <p>2</p>  
  35. </div>  
  36. <div>  
  37. <p>3</p>  
  38. </div>  
  39. <div>  
  40. <p>4</p>  
  41. </div>  
  42. </div>  
  43. </div>  
  44. <br />  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#horizontalTab').easyResponsiveTabs({  
  4.             type: 'default', //Types: default, vertical, accordion             
  5.             width: 'auto', //auto or any width like 600px  
  6.             fit: true   // 100% fit in a container  
  7.         });  
  8.   
  9.         $('#verticalTab').easyResponsiveTabs({  
  10.             type: 'vertical',  
  11.             width: 'auto',  
  12.             fit: true  
  13.         });  
  14.     });  
  15. </script>  

 


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