Tab选项卡

仿京东商城商品切换选项卡

也想出现在这里?联系我们
创客云

仿京东商城商品切换选项卡-云模板
这是一款使用 SuperSlide.js 来制作的仿京东商城商品切换选项卡 jquery 特效。该选项卡特效兼容 ie8 浏览器,适合用于制作各种商品切换展示效果,非常实用。

使用方法:

在页面中引入样式文件 style.css 和 jquery.min.js、jquery.SuperSlide.js 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="style.css">
  2. <script src="jquery.min.js"></script>             
  3. <script src="jquery.SuperSlide.js"></script>

HTML 结构:

该商品切换选项卡的基本 HTML 结构如下:

  1. <div class="tabox">
  2.       <div class="hd">
  3.         <ul>
  4.           <li class=" ">疯狂抢购</li>
  5.           <li class=" ">猜您喜欢</li>
  6.           <li class=" ">热卖商品</li>
  7.           <li class=" ">热评商品</li>
  8.           <li class="on">新品上架</li></ul>
  9.       </div>
  10.       <div class="bd">
  11.         <ul class="lh" style="display: none;">
  12.           <li>
  13.             <div class="p-img ld">
  14.               <a href="http://www.17sucai.com/">
  15.                 <img src="images/1.1.jpg"></a>
  16.             </div>
  17.             <div class="p-name">
  18.               <a href="http://www.17sucai.com/">艾家纺全棉加厚磨毛四件套</a></div>
  19.             <div class="p-price">京东价:
  20.               <strong>399.00</strong></div>
  21.           </li>
  22.           ......
  23.         </ul>
  24.         <ul class="lh" style="display: none;">
  25.           <li>
  26.             <div class="p-img ld">
  27.               <a href="http://www.17sucai.com/">
  28.                 <img src="images/2.1.jpg"></a>
  29.             </div>
  30.             <div class="p-name">
  31.               <a href="http://www.17sucai.com/">安钛克(Antec) 黑化外型设计电源</a></div>
  32.             <div class="p-price">京东价:
  33.               <strong>399.00</strong></div>
  34.           </li>
  35.           ......
  36.         </ul>
  37.         <ul class="lh" style="display: none;">
  38.           <li>
  39.             <div class="p-img ld">
  40.               <a href="http://www.17sucai.com/">
  41.                 <img src="images/3.1.jpg"></a>
  42.             </div>
  43.             <div class="p-name">
  44.               <a href="http://www.17sucai.com/">冬季健身TOP1!瑞亚特仰卧板加送俯卧撑架</a></div>
  45.             <div class="p-price">京东价:
  46.               <strong>187.00</strong></div>
  47.           </li>
  48.           ......
  49.         </ul>
  50.         <ul class="lh" style="display: none;">
  51.           <li>
  52.             <div class="p-img ld">
  53.               <a href="http://www.17sucai.com/">
  54.                 <img src="images/2.3.jpg"></a>
  55.             </div>
  56.             <div class="p-name">
  57.               <a href="http://www.17sucai.com/">希捷(Seagate)1TB </a></div>
  58.             <div class="p-price">京东价:
  59.               <strong>438.00</strong></div>
  60.           </li>
  61.           ......
  62.         </ul>
  63.         <ul class="lh" style="display: block;">
  64.           <li>
  65.             <div class="p-img ld">
  66.               <a href="http://www.17sucai.com/">
  67.                 <img src="images/2.5.jpg"></a>
  68.             </div>
  69.             <div class="p-name">
  70.               <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱</a></div>
  71.             <div class="p-price">京东价:
  72.               <strong>112.00</strong></div>
  73.           </li>
  74.           ......
  75.         </ul>
  76.       </div>
  77. </div>

初始化创建:

在页面 DOM 元素加载完毕之后,通过 slide()方法来初始化该商品切换选项卡插件:

  1. jQuery(".tabox").slide({delayTime: 0});
下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服