Open a specific tab with cbpFWTabs

问题

I am using cbpFWTabs (http://tympanus.net/Development/TabStylesInspiration/) but want to open a specific tab upon page load. I have tried to emulate the show method like this in the page but it doesn't recognize the tabs or items arrays:

    <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>

The tab source code is here: https://github.com/codrops/FullWidthTabs/blob/master/js/cbpFWTabs.js

I am sure there must be an easier way?

回答1:

It turned out to be easier than I thought -- simply invoke the click event on the anchor:

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

And adding an id to the anchor:

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

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

You can change this._show(); enter your content number like this._show(1);

回答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>

回答4:

OPs solution did not work for me, I had to do this:

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

Where 'first-tab' is the ID of your first tab's anchor:

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

'content' is the reference in your URL: page.html#content

Changing 'x' in triggers[x] will open the tabbed content corresponding to the hash on page load starting at 0 (so '1' in the example above will open the second tab on the page.)

A downside is that upon changing tabbed item the hash remains the same; maybe someone can improve upon this.

来源：https://stackoverflow.com/questions/26879383/open-a-specific-tab-with-cbpfwtabs

标签

javascript

jquery

html

tabs