Basic jQuery Tabs

Developer
Matt Edwards
Size
2,555 Kb
Views
28,336
  1. Basic jQuery Tabs Previews
  2. Basic jQuery Tabs HTML Codes
  3. Basic jQuery Tabs CSS Codes
  4. Basic jQuery Tabs JS Codes

How do I make an basic jquery tabs?

What is a basic jquery tabs? How do you make a basic jquery tabs? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.

Basic jQuery Tabs Previews
IQ Test

Basic jQuery Tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic jQuery Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tabs"> <ul class="tabNavigation"> <li><a class="active" href="#first">First</a></li> <li><a href="#second">Second</a></li> <li><a href="#third">Third</a></li> </ul> <div id="first"> <h2>First</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas voluptatem porro omnis excepturi consequatur neque doloribus ex facilis obcaecati ullam voluptate corporis quos voluptatum est eos mollitia eius quibusdam sint.</p> </div> <div id="second"> <h2>Second</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas voluptatem porro omnis excepturi consequatur neque doloribus ex facilis obcaecati ullam voluptate corporis quos voluptatum est eos mollitia eius quibusdam sint.</p> </div> <div id="third"> <h2>Third</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas voluptatem porro omnis excepturi consequatur neque doloribus ex facilis obcaecati ullam voluptate corporis quos voluptatum est eos mollitia eius quibusdam sint.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic jQuery Tabs - Script Codes CSS Codes

ul { padding: 0; margin-bottom: 3px;
}
ul:after { content: ""; clear: both; display: table;
}
li { list-style: none; float: left;
}
li a { text-decoration: none; color: white; padding: 5px 10px; background: tomato; border: 1px solid #333;
}
li a.active { background: #333;
}
li a:hover { background: #333;
}
.tabs div { border: 3px solid #333; width: 500px; padding: 10px; border: 1px solid #ddd; color: white;
}
.tabs div#first { background: red;
}
.tabs div#second { background: blue;
}
.tabs div#third { background: green;
}

Basic jQuery Tabs - Script Codes JS Codes

$(function(){ var tabContainers = $('div.tabs > div'); tabContainers.hide().filter(':first').show(); $('.tabNavigation a').click(function(){ tabContainers.hide(); tabContainers.filter(this.hash).show(); $('.tabNavigation a.active').removeClass('active'); $(this).addClass('active'); return false; });
});
Basic jQuery Tabs - Script Codes
Basic jQuery Tabs - Script Codes
Home Page Home
Developer Matt Edwards
Username mtedwards
Uploaded August 12, 2022
Rating 3
Size 2,555 Kb
Views 28,336
Do you need developer help for Basic jQuery Tabs?

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!

Matt Edwards (mtedwards) Script Codes
Name
A Quiz, reveal answers and keep score
Angular Form JSON test
JQuery Slider
Basic jQuery Filter list
JQuery .show .hide menu
JQuery lesson from Treehouse
Responsive layout with Fixed width Sidebar
JQuery featured gallery
Css Skew background for triangular overlay
JQuery YouTube Playlist
Create amazing SEO content 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!