Simple Tabs
How do I make an simple tabs?
What is a simple tabs? How do you make a simple tabs? This script and codes were developed by Alexander Nastase on 21 August 2022, Sunday.
Simple Tabs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <nav> <a href="#first" class="current">first</a> <a href="#second">second</a> <a href="#third">third</a> </nav> <section id="first" class="selected content"> First </section> <section id="second" class="content"> Second </section> <section id="third" class='content'> Third </section>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Tabs - Script Codes CSS Codes
body { padding:20px; }
body>section { position:relative; display:block; paddgin:5px; background:#ffcc00; margin:15px auto; width:650px; max-height:350px; height:auto; overflow:hidden; } body>section>nav { display:block; width:99%; height:25px; padding:4px; background:#ccc; text-align:center; } body>section>nav>a { text-decoration:none; font-family:"Georgia",serif; font-style:italic; color:#fff; display:inline-block; margin:0px 5px 0px 0px; height:25px; line-height:25px; } body>section>nav>a:hover { color:#444; } body>section>nav>a.current { font-weight:bold; color:#444; }
body>section>section { display:none; box-sizing:border-box; padding:5px; width:100%; min-height:50px; overflow:hidden; border-bottom:solid 1px #fff; } body>section>.selected { display:block; }
Simple Tabs - Script Codes JS Codes
(function ($) { $("nav a").click(function(event){ event.preventDefault(); $(".current").removeClass("current"); $(this).addClass("current"); $(".selected").fadeOut("fast",function(){ $(this).removeClass("selected"); }); $($(this).attr("href")).fadeIn("slow",function(){ $(this).addClass("selected"); }); });
})(jQuery);
Developer | Alexander Nastase |
Username | anodpixels |
Uploaded | August 21, 2022 |
Rating | 3 |
Size | 2,131 Kb |
Views | 32,384 |
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 |
CSS CREATURE | 1,916 Kb |
Right Click Menu | 2,252 Kb |
MaintenanceFastPage | 2,608 Kb |
Old Browser Warning | 2,198 Kb |
A Pen by Alexander Nastase | 2,142 Kb |
Accordion - Menu | 2,356 Kb |
Target effects | 1,855 Kb |
Fixed menu on top when scroll | 1,599 Kb |
Target effect | 2,163 Kb |
Tryout_slider_done | 2,104 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 |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Apple website | Jds317 | 1,835 Kb |
Fellowship of the Ring | Aussieyang | 2,639 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Console fun | Dviate | 1,500 Kb |
Profile box | Daniesy | 2,766 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!