jQuery UI Tabs
Sometimes it's quite useful if we can just place a few segments of info sharing the same space on the page so the visitor easily could browse through them without actually leaving the screen. jQuery tabs are used to separate content into different panes where each pane is viewable one at a time. With them you can easily create a tabbed panel with a different types of the content held inside each tab allowing the user to just click on the tab and get to view the desired content.
$(function() {
$( "#tabs" ).tabs();
});
<ul>
<li><a href = "#tabs1">Tab 1</a></li>
<li><a href = "#tabs2">Tab 2</a></li>
<li><a href = "#tabs3">Tab 3</a></li>
</ul>
Full Source
Browser View
<!doctype html>
<html>
<head>
<title>jQuery UI tab example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<style>
#tabs{font-size: 18px;}
.ui-widget-header {
background:white;
border: 1px solid #fof;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id = "tabs">
<ul>
<li><a href = "#tabs1">Tab 1</a></li>
<li><a href = "#tabs2">Tab 2</a></li>
<li><a href = "#tabs3">Tab 3</a></li>
</ul>
<div id = "tabs1" style="background-color:#eee";>
Tab-1 content here....
</div>
<div id = "tabs2" style="background-color:#ccc";>
Tab-2 content here....
</div>
<div id = "tabs3" style="background-color:#bbb";>
Tab-3 content here....
</div>
</div>
</body>
</html>
Using event
Instead of clicking, you can use other events to selects tab. For ex. if you want to select the tab using mouse over event, use the following code in jQuery function .
$(function() {
$( "#tabs" ).tabs({
event:"mouseover"
});
});
Related Topics