首页>>TAB标签>>自适应水平TAB选项卡效果(2018-10-18)

自适应水平TAB选项卡效果

 响应式的，可以调整浏览器大小或者手机查看效果

自适应水平TAB选项卡效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="content">  
  2.         <div class="ah-tab-wrapper">  
  3.             <div class="ah-tab">  
  4.                 <a class="ah-tab-item" data-ah-tab-active="true" href="">freejs.net</a>  
  5.                 <a class="ah-tab-item" href="">Contacts</a>  
  6.                 <a class="ah-tab-item" href="">Tab item with long name</a>  
  7.                 <a class="ah-tab-item" href="">Password change</a>  
  8.                 <a class="ah-tab-item" href="">Tab item</a>  
  9.             </div>  
  10.         </div>  
  11.         <div class="ah-tab-content-wrapper">  
  12.             <div class="ah-tab-content" data-ah-tab-active="true">  
  13.                 <h2>http://www.freejs.net/</h2>  
  14.             </div>  
  15.             <div class="ah-tab-content">  
  16.                 <h2>Contacts</h2>  
  17.             </div>  
  18.             <div class="ah-tab-content">  
  19.                 <h2>Tab item with a long name</h2>  
  20.             </div>  
  21.             <div class="ah-tab-content">  
  22.                 <h2>Password change</h2>  
  23.             </div>  
  24.             <div class="ah-tab-content">  
  25.                 <h2>Tab item</h2>  
  26.             </div>  
  27.         </div>  
  28.     </div>  

 


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