JQuery onchange in tabs event

Question

Does anyone know how to fire an event when I change from one tab to the other in JQuery?

for example:

<li><a href="#tab-1" onclick="submitForm();" onchange="myJSHere();">Tab</a></li>

The jQuery UI Tabs widget? Your JavaScript code makes no sense in terms of syntax by the way. — pimvdb, Oct 28 '11 at 10:58
You're not new here, you should know to give more information and define exactly what you want. — Madara's Ghost, Oct 28 '11 at 10:59

score 28 · Accepted Answer · answered Oct 28 '11 at 11:02

28

jQuery ui ???

$("#tabs").tabs({
    select: function(event, ui) {
        alert("PRESSED TAB!");
    }
});

answered Oct 28 '11 at 11:02

Marco Johannesen

13,084
6
31
36

Hilariously, this callback happens *before* the actual tab change event occurs. I had to work around this by wrapping my *actual* callback in a setTimeout :( – hughes Nov 11 '13 at 21:45
4

Maybe you could use the "activate" event, it says in the DOCS that it fires after animation is complete ;-) – Marco Johannesen Nov 15 '13 at 11:21

score 18 · Answer 2 · answered Jan 14 '14 at 13:28

$(function() {
    $( "#tabs" ).tabs({ activate: function(event ,ui){
                    //console.log(event);
                    //alert(  ui.newTab.index());
        alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);
        //alert( this.text);
                } });

Tiago S · Answer 3 · 2016-09-04T17:00:17.773

Work for me

HTML:

<div id="tabs">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Some content.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Some content in menu 1.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
        </div>
    </div>
</div>

Script

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
    $("#tabs").tabs({
        activate: function(event, ui) {
            alert("PRESSED TAB!");
        }
    });
</script>

score 4 · Answer 4 · answered Feb 25 '19 at 07:00

My Solution is Click Event Listener.

Solution:

$('.nav-tabs li').click(function () { 
  alert('Tab Clicked');
});

Complete Solution with HTML.

HTML

<div id="tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Some content.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Some content in menu 1.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
        </div>
    </div>
</div>

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.nav-tabs li').click(function () { 
  alert('Tab Clicked');
});

score 0 · Answer 5 · answered May 20 '23 at 09:50

In case anyone encounter an issue with jquery accordion inside tabs not displaying properly (especially after manipulating the contents of the accordion. The below snipper does the trick. The commented line is just in case you wish to re-create the accordion entirely.

        $("#tabs").tabs({
            activate: function(event, ui) {

                // $( ".accordion" ).accordion('destroy').accordion().accordion( "refresh" );
                $( ".accordion" ).accordion( "refresh" );
            }
        });

JQuery onchange in tabs event

5 Answers5

Linked