Search code examples
javascriptjquerywordpresstabsjquery-tabs

On click change tab


I have been trying to figure out how to change a tab(target another tab) (i think its JQuery Tabs) using a random <a href=""></a> from a previous tab.

What i currently have is:

<a class="txt-bblue hover-u" href="#" onclick="$(".wpb_tabs").tabs( "active", "tab-1393763893-1-88" )">becoming a carer</a>

but it doesn't seem to do anything. I have searched online and these forums for answers but the proposed solutions don't seem to work.

The Js function for the tabs is:

/* Tabs + Tours
---------------------------------------------------------- */
if ( typeof window['vc_tabsBehaviour'] !== 'function' ) {
function vc_tabsBehaviour() {
        jQuery(function($){$(document.body).off('click.preview', 'a')});
        jQuery('.wpb_tabs, .wpb_tour').each(function(index) {
            var $tabs,
                interval = jQuery(this).attr("data-interval"),
                tabs_array = [];
            //
            $tabs = jQuery(this).find('.wpb_tour_tabs_wrapper').tabs({
                show: function(event, ui) {wpb_prepare_tab_content(event, ui);},
                activate: function(event, ui) {wpb_prepare_tab_content(event, ui);}
                }).tabs('rotate', interval*1000);

            jQuery(this).find('.wpb_tab').each(function(){ tabs_array.push(this.id); });

            jQuery(this).find('.wpb_tab a[href^="#"]').click(function(e) {
                e.preventDefault();
                if ( jQuery.inArray( jQuery(this).attr('href'), tabs_array) ) {
                    $tabs.tabs("select", jQuery(this).attr('href'));
                    return false;
                }
            });

            jQuery(this).find('.wpb_prev_slide a, .wpb_next_slide a').click(function(e) {
                e.preventDefault();
                var ver = jQuery.ui.version.split('.');
                if(parseInt(ver[0])==1 &&  parseInt(ver[1]) < 9) {
                    var index = $tabs.tabs('option', 'selected');
                    if ( jQuery(this).parent().hasClass('wpb_next_slide') ) { index++; }
                    else { index--; }
                    if ( index < 0 ) { index = $tabs.tabs("length") - 1; }
                    else if ( index >= $tabs.tabs("length") ) { index = 0; }
                    $tabs.tabs("select", index);
                } else {
                    var index = $tabs.tabs( "option", "active"),
                        length = $tabs.find('.wpb_tab').length;

                    if ( jQuery(this).parent().hasClass('wpb_next_slide') ) {
                        index = (index+1) >=length ? 0 : index+1;
                    } else {
                        index = index-1 < 0 ? length -1 : index-1;
                    }

                    $tabs.tabs( "option", "active", index );
                }

            });

        });
}

}

it is the Js_composer plugin script for WP

The link to my page is: http://safercareltd.com/careers-training/jobs-vacancies/

any help for where i am going wrong would be great thanks


Solution

  • How about just triggering a click event on the tab you want to open:

    onclick="$('#ui-id-2').trigger('click');return false;"