js4.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. $('#tab1').tab({defaultIndex:0,activeClass:"tab-green"});
  14. $('#tab2').tab({defaultIndex:2,activeClass:"tab-red"});
  15. $('#tab3').tab({defaultIndex:0,activeClass:"tab-blue"});
  16. $('#tab4').tab({defaultIndex:0,activeClass:"tab-blue "}); $('#tab5').tab({defaultIndex:1,activeClass:"bg_green"});$('#tab6').tab({defaultIndex:2,activeClass:"bg_red"});
  17. });
  18. </script>
  19. </head>
  20. <body ontouchstart style="background-color: #f8f8f8;">
  21. <div class="weui_tab " style="height:44px;" id="tab1"><!--tab-fixed添加顶部-->
  22. <div class="weui_navbar" style="height:44px;">
  23. <div class="weui_navbar_item ">
  24. 已发货
  25. </div>
  26. <div class="weui_navbar_item">
  27. 未发货
  28. </div>
  29. <div class="weui_navbar_item">
  30. 全部订单
  31. </div>
  32. </div>
  33. </div>
  34. <h3>分隔样式</h3>
  35. <div class="weui_tab " style="height:44px;" id="tab2">
  36. <div class="weui_navbar" style="height:44px;">
  37. <div class="weui_navbar_item ">
  38. 已发货
  39. </div>
  40. <div class="weui_navbar_item">
  41. 未发货
  42. </div>
  43. <div class="weui_navbar_item ">
  44. 全部订单
  45. </div>
  46. </div>
  47. </div>
  48. <h3>分隔样式</h3>
  49. <div class="weui_tab" style="height:44px;" id="tab3" >
  50. <div class="weui_navbar" style="height:44px;">
  51. <div class="weui_navbar_item ">
  52. 选项一
  53. </div>
  54. <div class="weui_navbar_item">
  55. 选项二
  56. </div>
  57. <div class="weui_navbar_item">
  58. 选项三
  59. </div>
  60. <div class="weui_navbar_item">
  61. 选项四
  62. </div>
  63. <div class="weui_navbar_item">
  64. 选项五
  65. </div>
  66. </div>
  67. </div>
  68. <h3 >分隔样式</h3>
  69. <div class="weui_tab" style="height:44px;" id="tab4">
  70. <div class="weui_navbar" style="height:44px;">
  71. <div class="weui_navbar_item ">
  72. 选项一
  73. </div>
  74. <div class="weui_navbar_item">
  75. 选项二
  76. </div>
  77. <div class="weui_navbar_item">
  78. 选项三
  79. </div>
  80. </div>
  81. <div class="weui_tab_bd">
  82. <div class="weui_tab_bd_item">
  83. 选项一内容
  84. </div>
  85. <div class="weui_tab_bd_item">
  86. 选项二内容
  87. </div>
  88. <div class="weui_tab_bd_item">
  89. 选项三内容
  90. </div>
  91. </div>
  92. </div>
  93. <h3 >分隔样式</h3>
  94. <div class='page-hd' >
  95. <div class="weui_tab" style="height:44px;" id="tab5">
  96. <div class="weui_tab_nav"> <a href="javascript:" class="weui_navbar_item weui_nav_green"> 中国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_green"> 美国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_green"> 小日本 </a> </div>
  97. </div>
  98. <div class="weui_tab" style="height:44px;" id="tab6">
  99. <div class="weui_tab_nav"> <a href="javascript:" class="weui_navbar_item weui_nav_red"> 中国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_red"> 美国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_red"> 小日本 </a> </div>
  100. </div>
  101. </div>
  102. </body>
  103. </html>