更改/添加jQuery選項卡轉換

Question

我正在使用Bootstrap響應框架的網站上工作。我已經添加了內置的選項卡，他們正在完美工作，但我希望新選項卡scrollLeft選中時。目前新標籤只顯示沒有過渡選擇。

你可以在這裏查看源 - 點擊「創意啓用看到一個標籤式區域：http://www.chaosdesign.com/chaos-2012/

目前的jQuery的選項卡源代碼如下，

爲尋找謝謝！

/* ======================================================== 
* bootstrap-tab.js v2.0.0 
* http://twitter.github.com/bootstrap/javascript.html#tabs 
* ======================================================== 
* Copyright 2012 Twitter, Inc. 
* 
* Licensed under the Apache License, Version 2.0 (the "License"); 
* you may not use this file except in compliance with the License. 
* You may obtain a copy of the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 
* 
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, 
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
* See the License for the specific language governing permissions and 
* limitations under the License. 
* ======================================================== */ 


!function($){ 

    "use strict" 

/* TAB CLASS DEFINITION 
    * ==================== */ 

    var Tab = function (element) { 
    this.element = $(element) 
    } 

    Tab.prototype = { 

    constructor: Tab 

    , show: function() { 
     var $this = this.element 
     , $ul = $this.closest('ul:not(.dropdown-menu)') 
     , selector = $this.attr('data-target') 
     , previous 
     , $target 

     if (!selector) { 
     selector = $this.attr('href') 
     selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
     } 

     if ($this.parent('li').hasClass('active')) return 

     previous = $ul.find('.active a').last()[0] 

     $this.trigger({ 
     type: 'show' 
     , relatedTarget: previous 
     }) 

     $target = $(selector) 

     this.activate($this.parent('li'), $ul) 
     this.activate($target, $target.parent(), function() { 
     $this.trigger({ 
      type: 'shown' 
     , relatedTarget: previous 
     }) 
     }) 
    } 

    , activate: function (element, container, callback) { 
     var $active = container.find('> .active') 
     , transition = callback 
      && $.support.transition 
      && $active.hasClass('fade') 

     function next() { 
     $active 
      .removeClass('active') 
      .find('> .dropdown-menu > .active') 
      .removeClass('active') 

     element.addClass('active') 

     if (transition) { 
      element[0].offsetWidth // reflow for transition 
      element.addClass('in') 
     } else { 
      element.removeClass('fade') 
     } 

     if (element.parent('.dropdown-menu')) { 
      element.closest('li.dropdown').addClass('active') 
     } 

     callback && callback() 
     } 

     transition ? 
     $active.one($.support.transition.end, next) : 
     next() 

     $active.removeClass('in') 
    } 
    } 


/* TAB PLUGIN DEFINITION 
    * ===================== */ 

    $.fn.tab = function (option) { 
    return this.each(function() { 
     var $this = $(this) 
     , data = $this.data('tab') 
     if (!data) $this.data('tab', (data = new Tab(this))) 
     if (typeof option == 'string') data[option]() 
    }) 
    } 

    $.fn.tab.Constructor = Tab 


/* TAB DATA-API 
    * ============ */ 

    $(function() { 
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
    }) 

}(window.jQuery) 

Answer 1

你可以簡單地移動<li>是在<ul>的第一個元素...

$('#tab li a').click(function() { 
    $(this).parents('ul').prepend($(this).parent()); 
});​ 

簡單的例子使用您的標記http://jsfiddle.net/u2EqM/1/