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
Publish A Comment