jQuery tab仿京东商品切换选项卡效果



76 300 101



特效描述:tab商品切换 切换选项卡 切换效果,jQuery.SuperSlide选项卡切换,jQuery仿京东商品切换,tab选项卡切换效果。

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>

3. HTML代码

    <div class="tabox">
      <div class="hd">
        <ul>
          <li class=" ">疯狂抢购</li>
          <li class=" ">猜您喜欢</li>
          <li class=" ">热卖商品</li>
          <li class=" ">热评商品</li>
          <li class="on">新品上架</li></ul>
      </div>
      <div class="bd">
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.1.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">艾家纺全棉加厚磨毛四件套</a></div>
            <div class="p-price">京东价:
              <strong>¥399.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.2.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">优曼真丝提花奢华四件套</a></div>
            <div class="p-price">京东价:
              <strong>¥1299.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">3999!大金1.5匹变频空调更安静!</a></div>
            <div class="p-price">京东价:
              <strong>¥3999.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.4.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">爸爸爱喜禾(犬子在,不远游!感动无数读者的电子书</a></div>
            <div class="p-price">京东价:
              <strong>¥1.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">【超值】飞利浦21.5英寸LED背光宽屏液晶显示</a></div>
            <div class="p-price">京东价:
              <strong>¥809.00</strong></div>
          </li>
        </ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.1.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">安钛克(Antec)VP 550P 额定550W 120mm静音风扇 主动PFC 黑化外型设计电源</a></div>
            <div class="p-price">京东价:
              <strong>¥399.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.2.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">G.SKILL(芝奇)RipjawsX DDR3 1600 8G(4G×2条)台式机内存(F3-12800CL9D-8GBXL )</a></div>
            <div class="p-price">京东价:
              <strong>¥235.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.4.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">华硕(ASUS)P8Z77-V LK主板(Intel Z77/LGA 1155)</a></div>
            <div class="p-price">京东价:
              <strong>¥899.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱 经典-A1008 灰黑色(不含电源)</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
        </ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.1.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">冬季健身TOP1!瑞亚特仰卧板加送俯卧撑架</a></div>
            <div class="p-price">京东价:
              <strong>¥187.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.2.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">HTC Z715e!双核!魔音耳机!</a></div>
            <div class="p-price">京东价:
              <strong>¥2399.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">下单返现150元!格力9片电油汀</a></div>
            <div class="p-price">京东价:
              <strong>¥449.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.4.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">绿之源净味宝2居室除味超值套装 4000克</a></div>
            <div class="p-price">京东价:
              <strong>¥449.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">宏碁i5 4G GT630M 1G独显 月销量破</a></div>
            <div class="p-price">京东价:
              <strong>¥3599.00</strong></div>
          </li>
        </ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB ST1000DM003 7200转64M SATA 6Gb/秒 台式机硬盘 建达蓝德 盒装正品</a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
        </ul>
        <ul class="lh" style="display: block;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱 经典-A1008 灰黑色(不含电源)</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱 经典-A1008 灰黑色(不含电源)</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱 经典-A1008 灰黑色(不含电源)</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱 经典-A1008 灰黑色(不含电源)</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱 经典-A1008 灰黑色(不含电源)</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
        </ul>
      </div>
    </div>
    <script type="text/javascript">
	jQuery(".tabox").slide({delayTime: 0});
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到