我正在使用cbpFWTabs( https://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
我相信必须有一个更简单的方法吗?
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);
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”将打开页面上的第二个选项卡。)
缺点是在更改选项卡项时,哈希值保持不变; 也许有人可以改进这一点。
以上就是jQuery教程分享使用cbpFWTabs打开特定选项卡相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/558923.html