jquery切換tab標籤例子

標籤：隱藏   dcl   簡單   http   src   his   ima   效果   分享   

之前做了一個簡單的小效果，使用jquery方式，讓tab標籤切換，效果如下

代碼其實很簡單，首先先把代碼分享給大家，代碼如下

var shoptoggle = $(‘.shoptoggle .shop-toggle li‘);
       
        var shopwrap = $(‘div.shop-wrap‘);
        $(‘div.shop-wrap:first-child+div.shop-wrap‘).hide();
        $(‘#Sshop-wrap‘).hide();
        var link=$(‘div.details-link‘)
        var goog=$(‘div.goods-img‘)
        shoptoggle.click(function () {
            var $this = $(this);
            var $t = $this.index();
            shoptoggle.removeClass();
            $this.addClass(‘shop-cur‘);
            shopwrap.css(‘display‘, ‘none‘);
            link.css(‘display‘, ‘none‘);
            goog.css(‘display‘, ‘none‘);
            shopwrap.eq($t).css(‘display‘, ‘block‘);
            link.eq($t).css(‘display‘, ‘block‘);
            goog.eq($t).css(‘display‘, ‘block‘);
            
        }

大致解釋下代碼
 前面幾行主要是選取器的選擇，
從第3行先將對應的選取器隱藏掉

 shoptoggle這個選取器中，對應的操作切換的工作，比如先讓右邊的隱藏，當點擊右邊的時候，左邊的隱藏，基本效果已經在上面的，我也在這些記錄，以方便大家學習 

 

jquery切換tab標籤例子