Question

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

    <script type="text/javascript">

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

</script>

标签源代码位于：https://github.com/codrops/FullWidthTabs/blob/master/js/cbpFWTabs.js

我相信一定有更简单的方法吗？

Answer 1

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

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

在锚中添加一个id：

 <li><a id="settings-section" href="#section-bar-2" class="icon icon-box"><span>Settings</span></a></li>

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

<script>
       // new CBPFWTabs(document.getElementById('tabs'));
    $(document).ready(function(){

        function getURLParameter(name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
        }
        myvar = getURLParameter('status');
        if (myvar == "Submitted") {
            $('#idSubmitted1').addClass('tab-current');
        }
        else {
            $('#idSubmitted1').removeClass('tab-current');
        }
        if (myvar == "QCApprove") {
            $('#idSubmitted1').removeClass('tab-current');
            $('#idQcApproved2').addClass('tab-current');               
        }
        else {
            $('#idQcApproved2').removeClass('tab-current');
        }
        if (myvar == "Rejected") {
            $('#idRejected3').addClass('tab-current');
        }
        else {
            $('#idRejected3').removeClass('tab-current');
        }
        if (myvar == "Approved") {
            $('#idApproved4').addClass('tab-current');
        }
        else {
            $('#idApproved4').removeClass('tab-current');
        }
        if (myvar == "Pending") {
            $('#idPending5').addClass('tab-current');
        }
        else {
            $('#idPending5').removeClass('tab-current');
        }
        new CBPFWTabs(document.getElementById('tabs'));

        //this.tabs[this.current].className = 'tab-current';
        //this.items[this.current].className = 'content-current'
    })
</script>

Answer 4

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

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

在哪里＆＃39; first-tab＆＃39;是您的第一个标签的锚点的ID：

<a href="#content" id="first-tab">contact</a>

＆＃39;内容＆＃39;是您网址中的引用：page.html #content

改变＆＃39; x＆＃39;在触发器[x]中将打开与从0开始的页面加载的哈希对应的选项卡式内容（因此，上面示例中的＆＃39; 1＆＃39;将打开页面上的第二个选项卡。）

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

使用cbpFWTabs打开特定选项卡

4 个答案: