首页>>TAB标签>>tab切换效果，滑动tab 点击切换tab标签(2014-03-23)

tab切换效果，滑动tab 点击切换tab标签

tab切换效果，滑动tab 点击切换tab标签
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.               
  3.             <div class="main">  
  4.                 <div id="cbp-contentslider" class="cbp-contentslider">  
  5.                     <ul>  
  6.                           
  7.                         <li id="slide2">  
  8.                             <h3>freejs</h3>  
  9.                             <div>  
  10.                                 <div class="cbp-content">  
  11.                                     <p>freejs.net-Web演示,导航菜单,TAB标签,焦点图,图片特效,分页,表单,网站开发代码演示,批量上传,无刷新 php 处理数据</p>  
  12.                                 </div>  
  13.                             </div>  
  14.                         </li>  
  15.                         <li id="slide1">  
  16.                             <h3>导航菜单</h3>  
  17.                             <div>  
  18.                                 <div class="cbp-content">  
  19.                                     <p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>  
  20.                                 </div>  
  21.                             </div>  
  22.                         </li>  
  23.                         <li id="slide3">  
  24.                             <h3>分页</h3>  
  25.                             <div>  
  26.                                 <div class="cbp-content">  
  27.                                     <p><a href="http://www.freejs.net/fenye.html">翻页,分页，无刷新翻页,jquery翻页</a></p>  
  28.                                 </div>  
  29.                             </div>  
  30.                         </li>  
  31.                         <li id="slide4">  
  32.                             <h3>表单</h3>  
  33.                             <div>  
  34.                                 <div class="cbp-content">  
  35.                                     <p>表单,jquery更新表单,无刷新更新数据,表单检测,无刷新评论,无刷新留言,联动菜单,上传图片文件,批量上传,jquery上传</p>  
  36.                                 </div>  
  37.                             </div>  
  38.                         </li>  
  39.                         <li id="slide5">  
  40.                             <h3>TAB标签</h3>  
  41.                             <div>  
  42.                                 <div class="cbp-content">  
  43.                                     <p>tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab</p>  
  44.                                 </div>  
  45.                             </div>  
  46.                         </li>  
  47.                     </ul>  
  48.                     <nav>  
  49.                         <a href="#slide1"><span>freejs</span></a>  
  50.                         <a href="#slide2"><span>导航菜单</span></a>  
  51.                         <a href="#slide3"><span>分页</span></a>  
  52.                         <a href="#slide4"><span>表单</span></a>  
  53.                         <a href="#slide5"><span>TAB标签</span></a>  
  54.                     </nav>  
  55.                 </div>  
  56.             </div>  
  57. </div>  

 


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