アンカーページ上の特定のタブを開くリンク（cbpFWTabs）

Question

私はコードドロップのタブを使用しています。タブのスタイルインスピレーションと私はURLで特定のタブを開くことができる必要があります。

基本的にtab3を開く場合は、www.google.com/index#tab3にリンクします。ここで

は私のコードです：

<div class="tabs tabs-style-topline"> 
<nav> 
<ul> 
<li><a href="#section-topline-1"><span>Overview</span></a></li> 
<li><a href="#section-topline-2"><span>Register</span></a></li> 
<li><a href="#section-topline-3"><span>Exhibitors</span></a></li> 
</ul> 
</nav> 

<div class="content-wrap"> 
<section id="section-topline-1">Test 1</section> 
<section id="section-topline-2">Test 2</section> 
<section id="section-topline-3">Test 3</section> 
</div><!-- /content --> 
</div><!-- /tabs --> 

そして、ここではjavascriptのです：私は多くのjqueryの男じゃないと一日中解決策を見つけようとして行われている

;(function(window) { 

'use strict'; 

function extend(a, b) { 
    for(var key in b) { 
     if(b.hasOwnProperty(key)) { 
      a[key] = b[key]; 
     } 
    } 
    return a; 
} 

function CBPFWTabs(el, options) { 
    this.el = el; 
    this.options = extend({}, this.options); 
    extend(this.options, options); 
    this._init(); 
} 

CBPFWTabs.prototype.options = { 
    start : 0 
}; 

CBPFWTabs.prototype._init = function() { 
    // tabs elems 
    this.tabs = [].slice.call(this.el.querySelectorAll('nav > ul > li')  ); 
    // content items 
    this.items = [].slice.call(this.el.querySelectorAll('.content-wrap > section')); 
    // current index 
    this.current = -1; 
    // show current content item 
    this._show(); 
    // init events 
    this._initEvents(); 
}; 

CBPFWTabs.prototype._initEvents = function() { 
    var self = this; 
    this.tabs.forEach(function(tab, idx) { 
     tab.addEventListener('click', function(ev) { 
      ev.preventDefault(); 
      self._show(idx); 
     }); 
    }); 
}; 

CBPFWTabs.prototype._show = function(idx) { 
    if(this.current >= 0) { 
     this.tabs[ this.current ].className = this.items[ this.current ].className = ''; 
    } 
    // change current 
    this.current = idx != undefined ? idx : this.options.start >= 0 &&   this.options.start < this.items.length ? this.options.start : 0; 
    this.tabs[ this.current ].className = 'tab-current'; 
    this.items[ this.current ].className = 'content-current'; 
}; 

// add to global namespace 
window.CBPFWTabs = CBPFWTabs; 

})(window); 

申し訳ありませんこれを尋ねるアカウント。あなたの助けを前にありがとう。

Answer 1

多分ちょうどwindow.hashchangeイベントに耳を傾けてください。nav > li > aにクリックハンドラーはありません！ jQueryの方法：

$(function(){ 
    $(window).on('hashchange', function(e) { 
     var hash = window.location.hash; 

     // first reset classes 
     $('nav li').removeClass('tab-current'); 
     $('.content-wrap section').removeClass('content-current'); 

     $('nav li a[href="' + hash + '"]').parents('li').addClass('tab-current'); 
     $('section[id="' + hash.replace('#', '') + '"]').addClass('content-current'); 
    }); 
});