點擊對象在同一頁上觸發單獨的鏈接

Question

您好我正在使用bootstrap-tab.js（如下）to change tabs，我想通過頁面上的單獨鏈接激活其中一個選項卡。通過鏈接到「#tab2」，我可以非常輕鬆地訪問第二個標籤內容，但問題是標籤系統不能反映這一變化。所以我的Tab1是活躍的，而Tab2內容顯示，如果這是有道理的。

我懷疑最簡單的方法來做到這一點（給出的JS）是觸發鏈接點擊從實際標籤使用JS。任何想法如何實現這一目標？

!function ($) { 

    "use strict"; // jshint ;_; 


/* 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 
     , e 

     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] 

     e = $.Event('show', { 
     relatedTarget: previous 
     }) 

     $this.trigger(e) 

     if (e.isDefaultPrevented()) return 

     $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

好的，很抱歉，我想通了。

$(document).ready(function(){ 
    $('#scoretab').click(function (e) { 
     $('#myTab a[href="#tab2"]').tab('show'); 
    }) 
});