使用cbpFWTabs打开特定选项卡

我正在使用cbpFWTabs（ http://tympanus.net/Development/TabStylesInspiration/ ），但想在页面加载时打开一个特定的选项卡。 我试图在页面中模拟这样的show方法，但它无法识别选项卡或项目数组：

 // tabs elems this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) ); // content items this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) ); 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'; }; tabIndex = 1; showTab(tabIndex);  

选项卡源代码如下： https ： //github.com/codrops/FullWidthTabs/blob/master/js/cbpFWTabs.js

我相信必须有一个更简单的方法吗？

Answer 1

事实certificate这比我想象的要简单 – 只需调用锚点上的click事件：

 $('#settings-section')[0].click(); 

并向锚添加一个id：

  
Settings 

Answer 2

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

你可以改变这个._show（）; 输入您的内容编号，如this._show（1）;

Answer 3

Answer 4

OP解决方案对我不起作用，我不得不这样做：

 var triggers = [].slice.call( tabs.querySelectorAll( 'nav > ul > li' ) ); document.getElementById('first-tab').addEventListener('click', function() { }); if ( location.hash != 0 && location.hash == '#content' ){ triggers[1].click(); } 

‘first-tab’是第一个标签锚点的ID：

 contact 

‘content’是您url中的引用：page.html #content

在触发器[x]中更改“x”将打开与页面加载时从0开始的散列对应的选项卡式内容（因此上面示例中的“1”将打开页面上的第二个选项卡。）

缺点是在更改选项卡项时，哈希值保持不变; 也许有人可以改进这一点。