Tab area
How do I make an tab area?
Simple tab area with jquery. What is a tab area? How do you make a tab area? This script and codes were developed by Corbin on 26 September 2022, Monday.
Tab area - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>tab area</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="tab_list"> <li class="pigs active">Pigs</li> <li class="cows">Cow</li> <li class="chic">Chicken</li>
</ul>
<p id="test"></p>
<div id="panes"> <div class="pigs_pane pane active">Piggys</div> <div class="cows_pane pane">Cowys</div> <div class="chic_pane pane">Chicky</div>
</div>
<p id="test"></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Tab area - Script Codes CSS Codes
#panes { position: relative;
}
.pane { border: 2px solid black; width: 200px; left: -300px; position: absolute; top: 0;
}
.active { display: block !important; left: 0;
}
Tab area - Script Codes JS Codes
$('#tab_list li').on("click", function(){ var animal = ""; //get animal name animal = $(this).attr('class'); //remove class active and fadeOut $('#panes > .active').animate({ 'left' : -300 + "px" }, 800, function() { $(this).removeClass('active').removeAttr('style'); $('#tab_list li.active').removeClass('active'); $('#tab_list li.' + animal).addClass('active'); $('#panes .' + animal + '_pane').css('left', -300 + "px").animate({ 'left' : 0 }, 800).addClass('active'); });
});
Developer | Corbin |
Username | corbinmj16 |
Uploaded | September 26, 2022 |
Rating | 3 |
Size | 1,978 Kb |
Views | 20,240 |
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!
Name | Size |
Javascript Ternary Operator | 1,988 Kb |
JS Find total and using textContent | 1,610 Kb |
Vue.js Search | 1,811 Kb |
Simple Parallax Scroll | 2,321 Kb |
Red Box Move on Mouse Coordiantes | 1,728 Kb |
Slider with arrows and dots | 3,897 Kb |
Vue.js To-do List | 1,736 Kb |
Drawing App with Canvas | 3,340 Kb |
Diabetes Calculator | 1,874 Kb |
JS Arrays | 1,913 Kb |
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!
Name | Username | Size |
Draggable directive | YahyaKacem | 2,277 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Calculator | Rzencoder | 4,572 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
3D-box | Parthviroja | 2,346 Kb |
Click handler test | Snapson | 2,329 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!