首页>>TAB标签>>tab标签可以显示指定项目，清除tab效果并重建(2014-01-09)

tab标签可以显示指定项目，清除tab效果并重建

tab标签可以显示指定项目，清除tab效果并重建
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="wrap">  
  2. <h2>Basic tabs example</h2>  
  3. <div class="set set-1">  
  4. <div class="panel panel-1">  
  5. <h2>Panel 1</h2>  
  6. <p><a href="http://freejs.net/article_fenye_19.html">jquery 无刷新翻页</a>  
  7.  本例与《jquery 翻页分页》的区别在于本例更实用,翻页数字太多的时候会隐藏中间的部分。数据库与《jquery 翻页分页》的数据库相同</p>  
  8. <button class="btn">Show tab 3</button>  
  9. <button class="destroy">Destroy</button>  
  10. <button class="apply">Apply</button>  
  11. </div>  
  12. <div class="panel panel-2">  
  13. <h2>Panel 2</h2>  
  14. <p>2</p>  
  15. </div>  
  16. <div class="panel panel-3">  
  17. <h2>Panel 3</h2>  
  18. <p>3</p>  
  19. </div>  
  20. <div class="panel panel-4">  
  21. <h2>Panel 4</h2>  
  22. <p>4</p>  
  23. </div>  
  24. </div>  
  25. <h2>With callback on tab select</h2>  
  26. <div class="set set-2">  
  27. <div class="panel panel-1">  
  28. <header class="heading">Panel 1</header>  
  29. <p>1</p>  
  30. <button class="btn">Show tab 2</button>  
  31. </div>  
  32. <div class="panel panel-2">  
  33. <header class="head">Panel 2</header>  
  34. <p>2</p>  
  35. </div>  
  36. <div class="panel panel-3">  
  37. <header class="h1">Panel 3</header>  
  38. <p>3</p>  
  39. </div>  
  40. </div>  
  41. </div>  

 

JavaScript Code
  1. <script>   
  2.             $(function() {   
  3.                 $(".set-1").mtabs();   
  4.                    
  5.                 $(".set-2").mtabs({   
  6.                     tab_text_el: ".heading, .head, header",   
  7.                     onTabSelect: function(idx) {   
  8.                         console.log("Selected tab is: " + idx);   
  9.                     },   
  10.                     onReady: function () {   
  11.                         console.log('Set 2 ready!');   
  12.                     }   
  13.                 });   
  14.   
  15.                 $('.set-1 .panel-1 .btn').on('click', function(event) {   
  16.                     $('.set-1').mtabs('show', 2);   
  17.   
  18.                     event.preventDefault();   
  19.                 });   
  20.   
  21.                 $('.set-1 .panel-1 .destroy').on('click', function(event) {   
  22.                     $('.set-1').mtabs('destroy');   
  23.   
  24.                     event.preventDefault();   
  25.                 });   
  26.   
  27.                 $('.set-1 .panel-1 .apply').on('click', function(event) {   
  28.                     $('.set-1').mtabs();   
  29.   
  30.                     event.preventDefault();   
  31.                 });   
  32.   
  33.                 $('.set-2 .panel-1 .btn').on('click', function(event) {   
  34.                     $('.set-2').mtabs('show', 1);   
  35.   
  36.                     event.preventDefault();   
  37.                 });   
  38.             });   
  39.         </script>   
  40.          

 


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