Javascript 用于在页面上打开特定选项卡的锚定链接（cbpFWTabs）

我一直在使用codrops Tab Styles灵感中的选项卡，我需要能够打开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 -->

测试1
测试2
测试3

下面是javascript：

;( 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 );

；（功能（窗口）{
"严格使用",；
功能扩展（a，b）{
对于（b中的var键）{
如果（b.hasOwnProperty（键））{
a[键]=b[键]；
}
}
返回a；
}
功能CBPFWTabs（el，选件）{
this.el=el；
this.options=extend（{}，this.options）；
扩展（这个。选项，选项）；
这个；
}
CBPFWTabs.prototype.options={
起点：0
};
CBPFWTabs.prototype.\u init=function（）{
//标签元素
this.tabs=[].slice.call（this.el.queryselectoral（'nav>ul>li'）；
//内容项
this.items=[].slice.call（this.el.querySelectorAll（'.content wrap>section'）；
//当前索引
这是电流=-1；
//显示当前内容项
这个；
//初始化事件
这个；
};
CBPFWTabs.prototype.\u initEvents=function（）{
var self=这个；
this.tabs.forEach（函数（tab，idx）{
tab.addEventListener（'click'，函数（ev）{
ev.preventDefault（）；
自我展示（idx）；
} );
} );
};
CBPFWTabs.prototype.\u show=函数（idx）{
如果（this.current>=0）{
this.tabs[this.current].className=this.items[this.current].className=''；
}
//变流
this.current=idx！=未定义？idx:this.options.start>=0&&this.options.start

---

对不起，我不是一个喜欢jquery的人，整天都在寻找解决方案，只是为了问这个问题，我开了个账户。提前感谢您的帮助。

可能只需收听

窗口。hashchange

事件完成此操作，无需单击

nav>li>a

！。jQuery方法：

$（函数（）{
$（窗口）.on（'hashchange'，函数（e）{
var hash=window.location.hash；
//第一次重置类
$（'nav li'）.removeClass（'tab-current'）；
$（'.content-wrap-section'）.removeClass（'content-current'）；
$（'nav li a[href=“”+hash+'“]”）。父（'li'）。addClass（'tab-current'）；
$（'section[id=“”+hash.replace（'#'，''）+']）.addClass（'content-current'）；
});
});