Open In App

jQuery UI Tabs active Option

Last Updated : 08 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use active option in jQuery UI slider.
The
active option specifies the current active tab in jQuery UI tabs. By default, value is 0.

Syntax:

$( ".selector" ).tabs(
   { active: 1 }
);

Parameters:

  • boolean: if set to false will collapse all the panels. If set to true 0th index tab will be active.
  • number: The zero-based index of the panel that is active.

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

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example 1:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
  
    <link href=
        rel="stylesheet">
  
    <script src=
    </script>
      
    <script src=
    </script>
  
    <script>
        $(function () {
            $("#gfg").tabs({
                active: 2
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery UI tabs active option</h3>
      
    <div id="gfg">
        <ul>
            <li><a href="#gfg1">Tab 1</a></li>
            <li><a href="#gfg2">Tab 2</a></li>
            <li><a href="#gfg3">Tab 3</a></li>
        </ul>
  
        <div id="gfg1">
            <p>tab Number -1</p>
        </div>
  
        <div id="gfg2">
            <p>tab Number -2</p>
        </div>
  
        <div id="gfg3">
            <p>tab Number -3</p>
        </div>
    </div>
</body>
  
</html>


Output:

Example 2:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
  
    <link href=
        rel="stylesheet">
          
    <script src=
    </script>
      
    <script src=
    </script>
  
    <script>
        $(function () {
            $("#gfg").tabs({
                active: false
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery UI tabs active option</h3>
  
    <div id="gfg">
        <ul>
            <li><a href="#gfg1">Tab 1</a></li>
            <li><a href="#gfg2">Tab 2</a></li>
            <li><a href="#gfg3">Tab 3</a></li>
        </ul>
  
        <div id="gfg1">
            <p>tab Number -1</p>
        </div>
  
        <div id="gfg2">
            <p>tab Number -2</p>
        </div>
  
        <div id="gfg3">
            <p>tab Number -3</p>
        </div>
    </div>
</body>
  
</html>


Output:



Previous Article
Next Article

Similar Reads

jQuery UI Tabs disabled Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use disabled option in jQuery UI slider. T
2 min read
jQuery UI Tabs collapsible Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use collapsible option in jQuery UI slider
2 min read
jQuery UI Tabs event Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use event option in jQuery UI slider. The
2 min read
jQuery UI Tabs option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article, we will see how to use the option method in jQuery UI slider
2 min read
jQuery UI Tabs heightStyle Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use heightStyle option in jQuery UI slider.
2 min read
jQuery UI tabs show Option
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 show option is used to display the panel animation. It accepts different types of values i.e. Boolean or Number or String or Object. Syntax: $( ".selector" ).tabs({
1 min read
jQuery UI tabs hide Option
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 hide option is used to display the animation effect to hide the tab content. It accepts the different type of value i.e. Boolean or Number or String or Object. Synt
1 min read
jQuery UI tabs classes Option
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 classes option is used to add the additional classes to the element. Syntax: $( ".selector" ).tabs({ classes: { "ui-tabs": "highlight" } }); CDN Link: First, add jQ
1 min read
React Suite Dropdown Option Active State
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Dropdown component allows the user to provide navigation that uses a select picker if you want to select a value. React Suite Dropdown Option Active State helps to set a value active by default in a Dropdown men
3 min read
jQueryUI Accordion active Option
The accordion active option Indicates which index of the accordion menu is to be open when the page is accessed. By default, the value is 0, i.e. the first menu panel. Values: Boolean: When set to false will collapse all the panels.Integers: Zero-based index that sets which panel is to be active. Value can also be negative.Approach: First, add the
2 min read