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
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
- ModuleNotFoundError: No module named 'openpyxl' - Python
- How to get thumbnail from vimeo video URL in Python?
- Remove all special characters, punctuation except spaces from string - Python
- OSError: cannot write mode RGBA as JPEG- Python
- expected str, bytes or os.PathLike object, not JpegImageFile - Python
Related Article