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
- OSError: cannot open resource - Python
- Python read file line count
- How to Encode & Decode using Base64 in Python?
- Unspecified error-The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support.
- How to generate a Captcha verification code image with Python?
- How to show an image using path python PIL?
- How to remove Background from the images using Python?
- Python generate QR code image
Related Article