Tabs are horizontally displaying like menu tab, jQuery ui widget is used to toggle the visibility of the elements. Other than active panel the contents of all section is set to display: none. We can also customize the css effects, events as our wish. This example you will learn briefly about how to implement jQuery menu tab.
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Menu tab jquery </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script>
$(document).ready(function ($) {
$("#myTabs").tabs();
});
</script>
</head>
<body style="width: 500px;">
<h2 style="color: orange"> Menu tabjquery </h2>
<div id="myTabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">
This is the content panel linked to the first tab, it
is shown by default.
</div>
<div id="tab2">
This content is linked to the second tab and will be
shown when its tab is clicked.
</div>
</div>
</body>
</html>
Output:
Post your comments / questions
Recent Article
- Import "django.shortcuts" could not be resolved from source in Django Project
- How to add two numbers in Android Studio? | Source Code
- FindViewByID returns null in android studio -SOLVED
- Saving changes is not permitted in SQL SERVER - [SOLVED]
- Restore of database failed. File cannot be restored over the existing. -[SOLVED]
- One or more projects in the solution were not loaded correctly in Visual Studio 2019 | FIXED
- How to find Laptop's Battery Health?
- SOLVED-Related Field got invalid lookup: icontains error in Django
Related Article