Open a specific tab with cbpFWTabs

Question

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

Answer 1

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

Answer 2

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

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>

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