jQuery tab仿京東商品切換選項卡效果



79 312 105



特效描述: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

加群請備注:從官網了解到

老夫子电子