jQuery UI Tabs beforeActivate Event

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Tabs widget is used to create a single content area with multiple panels that are associated with a header in a list.

The jQuery UI Tabs beforeActivate event is used to trigger when the tab is going to be active.

The Tabs beforeActivate event accepts 2 values that are listed below:

• event: It represents the event for the tabs widget.
• ui: It is of an object type, and contains the following values:
  • newTab: It represents the tab that is about to be activated.
  • oldTab: It represents the tab that is about to be deactivated.
  • newPanel: It represents the panel that is about to be activated.
  • oldPanel: It represents the panel that is about to be deactivated.

Syntax:

Initialize the tabs with the create callback:

$( ".selector" ).tabs({
 beforeActivate: function( event, ui ) {}
});

Bind an event listener to the tabsbeforeactivate event:

$( ".selector" ).on( 
 "tabsbeforeactivate", 
 function( event, ui ) {} 
);

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: This example describes the uses of the jQuery UI Tabs beforeActivate event.

Output:

👁 Image

Reference: https://api.jqueryui.com/tabs/#event-beforeActivate