Jquery UI Tabs

Tabs is a way to load content with multiple panels from their content area without reloading the webpage. Each panel is associated with their content area.

Create a container using a div tag.
<div class="menu"></div>
Create a menu using ul or ol tag in the container and do the listing of the tabs' menu.
<div class="menu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#html">HTML</a></li> </ul> </div>
Now, after closing ul tag, make div containers for each menu's (tabs) content. Give id value to each that will go in the menu's anchor text.
<div class="menu"> <ul>...</ul> <div id="home"></div> <div id="html"></div> </div>
Finally, write content for each tab in their container.
<div class="menu"> <ul>...</ul> <div id="home"><p>Welcome to Homepage.</p></div> <div id="html"><p>Welcome to HTML page.</p></div> </div>

Example-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#html">HTML</a></li>
  <li><a href="#css">CSS</a></li>
  <li><a href="#js">JAVASCRIPT</a></li>
  <li><a href="#jquery">JQUERY</a></li>
</ul>

<!--containers coding start-->

<div id="home">
  <p>Welcome to <mark>Home</mark> page.</p>
</div>

<div id="html">
  <p>Welcome to <b>HTML</b> page.</p>
</div>

<div id="css">
  <p>Welcome to <strong>CSS</strong> page.</p>
</div>

<div id="js">
  <p>Welcome to <i>JAVASCRIPT</i> page.</p>
</div>

<div id="jquery">
  <p>Welcome to <u>JQUERY</u> page.</p>
</div>

<!--end containers coding-->
</div>

<script>
  $(document).ready(function(){
    $(".menu").tabs();
  });
  </script>
</body>
</html>

Options of tabs()

Property	Value	Example
active	0,1,2,....(or indexing number of tab)	View
collapsible	true or false	View
event	"mouseover", "mouseout", "dblclick", "click"	View

active Option

Jquery UI gives indexing number to ul items so you need to pass indexing number to make a tab active. The indexing number starts from 0. Use 0 to make the first tab active, 1 for the second tag, and so on.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#html">HTML</a></li>
  <li><a href="#css">CSS</a></li>
  <li><a href="#js">JAVASCRIPT</a></li>
  <li><a href="#jquery">JQUERY</a></li>
</ul>

<!--containers coding start-->

<div id="home">
  <p>Welcome to <mark>Home</mark> page.</p>
</div>

<div id="html">
  <p>Welcome to <b>HTML</b> page.</p>
</div>

<div id="css">
  <p>Welcome to <strong>CSS</strong> page.</p>
</div>

<div id="js">
  <p>Welcome to <i>JAVASCRIPT</i> page.</p>
</div>

<div id="jquery">
  <p>Welcome to <u>JQUERY</u> page.</p>
</div>

<!--end containers coding-->
</div>

<script>
  $(document).ready(function(){
    $(".menu").tabs({
      active:2,
    });
  });
  </script>
</body>
</html>

collapsible Option

This property generates toggle effect. You will see this effect when a tab is active and you click on it again.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#html">HTML</a></li>
  <li><a href="#css">CSS</a></li>
  <li><a href="#js">JAVASCRIPT</a></li>
  <li><a href="#jquery">JQUERY</a></li>
</ul>

<!--containers coding start-->

<div id="home">
  <p>Welcome to <mark>Home</mark> page.</p>
</div>

<div id="html">
  <p>Welcome to <b>HTML</b> page.</p>
</div>

<div id="css">
  <p>Welcome to <strong>CSS</strong> page.</p>
</div>

<div id="js">
  <p>Welcome to <i>JAVASCRIPT</i> page.</p>
</div>

<div id="jquery">
  <p>Welcome to <u>JQUERY</u> page.</p>
</div>

<!--end containers coding-->
</div>

<script>
  $(document).ready(function(){
    $(".menu").tabs({
      active:0,
      collapsible:true,
    });
  });
  </script>
</body>
</html>

event Option

Via event option you can define that on what mouse event another tab should be opened. The values of event can be click, dblclick, mouseover, mouseout, etc.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#html">HTML</a></li>
  <li><a href="#css">CSS</a></li>
  <li><a href="#js">JAVASCRIPT</a></li>
  <li><a href="#jquery">JQUERY</a></li>
</ul>

<!--containers coding start-->

<div id="home">
  <p>Welcome to <mark>Home</mark> page.</p>
</div>

<div id="html">
  <p>Welcome to <b>HTML</b> page.</p>
</div>

<div id="css">
  <p>Welcome to <strong>CSS</strong> page.</p>
</div>

<div id="js">
  <p>Welcome to <i>JAVASCRIPT</i> page.</p>
</div>

<div id="jquery">
  <p>Welcome to <u>JQUERY</u> page.</p>
</div>

<!--end containers coding-->
</div>

<script>
  $(document).ready(function(){
    $(".menu").tabs({
      active:0,
      event:"mouseover",
    });
  });
  </script>
</body>
</html>

To give effects try these - Jquery UI effects

Jquery UI Tabs

Options of tabs()

active Option

collapsible Option

event Option

Publish A Comment

Leave a Reply Cancel reply