While Bootstrap is the queen bee amongst CSS frameworks, the contarian in me really likes Zurb Foundation. I'm using it in a project now, mostly just to learn the differences between it and Bootstrap.

While using Foundation's Tab component, I needed to capture the tab change event (you can't render most JavaScript-based charts on hidden HTML so these charts have to be generated after their parent tab has been displayed). Foundation's documentation on the Tab component's API is a little foggy (disappointing, because much of the Foundation docs are very good). But after little CodePen work, I figured how to capture the _handleTabChange event as well as how to programmatically select a tab. There isn't much more to the Tab's component's JavaScript API. Most of the other things you might need to do (such as disabling a tab) would probably best be done by dynamically changing CSS classes.

Foundation raises the tab component's _handleTabChange event after a tab is displayed. The code to capture the event is shown below. While you can't directly debug JavaScript with CodePen, the old school debugger JavaScript statement is at least a decent work-around. I used it to prove the event raises after the tab is changed.

    $('#example-tabs').on('change.zf.tabs', function() {
        if ($('#panel1:visible').length) {
           console.log('Tab 1 panel shown.');
        if ($('#panel2:visible').length) {
           console.log('Tab 2 panel shown.');

Changing tabs programatically is easy with this JavaScript

    $('#example-tabs').foundation('selectTab', 'panel1');

where selectTab is method name and panel1 is the tab content element id.

When a page is intially displayed with an active specified with Foundation's is-active class (making that tab the default tab), the tab change event isn't called for that initially displayed default tab. To ensure the change event gets called for that default tab, call the selectTab method, as shown above, right after initializing the Foundation framework (see the code in the Pen).