jQuery : Basic Tabbing

You can use the below jQuery code to create jQuery basic tabbing in your HTML Page:

Please find the sample code with examples below:

// ====Start of the code====

<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<title>JQuery Tabbing Functionality</title>
<link rel=“stylesheet” href=“//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=“stylesheet” href=“/resources/demos/style.css”>
<script src=https://code.jquery.com/jquery-1.12.4.js&#8221;/>
<script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js&#8221;/>
<script>
jQuery(function () {
jQuery(“#tabbing”).tabs();
});
</script>
</head>
<body>
<div id=“tabbing”>
<ul>
<li><a href=“#tab1”>Tab 1</a></li>
<li><a href=“#tab2”>Tab 2</a></li>
<li><a href=“#tab3”>Tab 3</a></li>
</ul>
<div id=“tab1”>
<p>Tab 1 content.</p>
</div>
<div id=“tab2”>
<p>Tab 2 content.</p>
</div>
<div id=“tab3”>
<p>Tab 3 content.</p>
</div>
</div>
</body>
</html>

// ====End of the code====

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s