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:

<!doctype html>
<html lang="en">
<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"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"/>
jQuery(function () {
<div id="tabbing">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<div id="tab1">
<p>Tab 1 content.</p>
<div id="tab2">
<p>Tab 2 content.</p>
<div id="tab3">
<p>Tab 3 content.</p>

Leave a Reply