[WordPress] How to use Bootstrap events to manage tab change events in WordPress development.

00-bootstrap-tab-markup.php

<ul class="nav acme-tabs" role="tablist"></ul>
  <li role="presentation" class="active">
    <a data-toggle="tab" href="#home">Home</a>
  </li>
  <li role="presentation">
    <a data-toggle="tab" href="#questions">Questions</a>
  </li>
  <li class="settings">
    <a data-toggle="tab" href="#settings">Settings</a>
  </li>
</ul><!-- .acme-tabs --<

01-read-the-selected-tab.js

var anchor;
$( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function( evt ) {

	// Read the a href of the anchor that was clicked
	anchor = $( evt.target ).attr( 'href' );
	
	// Trim the leading '#' from the href attribute
	anchor = criteria.substr( 1, criteria.length );

	// We'll see this in the next gist
	acme_toggle_display( $, anchor );

});

02-an-ajax-request.js

/**
 * Initiates an Ajax request and then, based on the response, determines whether
 * or not the #acme-element should be displayed or hidden.
 * 
 * Note that this assume you have the WordPress Ajax library loaded and are comfortable
 * with Ajax in WordPress.
 *
 * @since    1.0.0
 *
 * @param    object    $         A reference to the jQuery object.
 * @param    string    anchor    The name of the anchor, or tab, that was clicked when this function was called.
 */
function acme_toggle_display( $, achor ) {

	$.get( ajaxurl, {
		
		'action':   'acme_should_toggle_element',
		'data':     anchor
		
	}, function( response ) {

		if ( 'true' === response ) {
			$( '#acme-element' ).hide();
		} else {
			$( '#acme-element' ).show();
		}

	});

}