Jquery Tab

Developer
Parth Viroja
Size
2,367 Kb
Views
30,360
  1. Jquery Tab Previews
  2. Jquery Tab HTML Codes
  3. Jquery Tab CSS Codes
  4. Jquery Tab JS Codes

How do I make an jquery tab?

What is a jquery tab? How do you make a jquery tab? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Jquery Tab Previews
IQ Test

Jquery Tab - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jquery Tab</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tab-container"> <div class="tabs-menu"> <ul> <li class="current"> <label class="tab" data-tab="0" title="">Tab-1</label> </li> <li> <label class="tab" data-tab="1" title="">Tab-2</label> </li> </ul> </div> <div class="tab-divs"> <div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit </div> <div> Ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae </div> </div>
</div> <script src='http://code.jquery.com/jquery-1.11.3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery Tab - Script Codes CSS Codes

* { padding: 0px; margin: 0px; outline: none; font: 20px "Calibri"; font-weight: lighter; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #009900; overflow: hidden; overflow-y: auto; padding: 10% 20%;
}
h1 { font-size: 3em; font-weight: lighter; color: #fff; text-align: center; display: block; padding: 40px 0px;
}
.tab-container { position: relative; display: block;
}
.tab-container > .tabs-menu > ul { position: relative; display: block;
}
.tab-container > .tabs-menu > ul > li { position: relative; display: inline-block; background-color: #fff;
}
.tab-container > .tabs-menu > ul > li.current { position: relative; background-color: #ffffff; z-index: 5;
}
.tab-container > .tabs-menu > ul > li.current label.tab { color: #009900;
}
.tab-container label.tab { position: relative; display: block; font-size: 20px; padding: 16px 24px; color: #999; cursor: pointer;
}
.tab-divs { margin-top: -1px;
}
.tab-divs > div { display: block; padding: 20px; display: none; letter-spacing: 1px; background: #fff; color: #009900;
}
.tab-divs > div:first-child { display: block;
}

Jquery Tab - Script Codes JS Codes

$(document).ready(function() { $(document).on('click', '.tab-container label.tab', function() { var no = $(this).data('tab'); $(this).parent('li').siblings().removeClass('current'); $(this).parent('li').addClass('current'); $(this).closest('.tab-container').find('.tab-divs > div').hide().eq(no).show(); });
});
Jquery Tab - Script Codes
Jquery Tab - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,367 Kb
Views 30,360
Do you need developer help for Jquery Tab?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
Slide up down
Ripple Effect
Form Wizard
Tag list
Card border collspan
Right side menu tab with icon
Ubuntu Terminal
3D-box
Css Dropdown Design
Treeview using Angular
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!