Simple Tabs Concept

Developer
Kyle Brumm
Size
4,038 Kb
Views
4,048
  1. Simple Tabs Concept Previews
  2. Simple Tabs Concept HTML Codes
  3. Simple Tabs Concept CSS Codes
  4. Simple Tabs Concept JS Codes

How do I make an simple tabs concept?

What is a simple tabs concept? How do you make a simple tabs concept? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Simple Tabs Concept Previews
IQ Test

Simple Tabs Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Tabs Concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <h1>Simple Tabs Concept</h1> <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>
<div class="wrapper"> <ul class="tab-controls"> <li><a href="#" class="active" data-tab-item="1">Retro</a></li> <li><a href="#" data-tab-item="2">Humblebrag</a></li> <li><a href="#" data-tab-item="3">Playlist</a></li> </ul> <div class="tab-item-1"> <p> Health goth direct trade cornhole beard, gentrify knausgaard man bun tattooed cray. Lo-fi pug intelligentsia, mustache salvia church-key yr leggings food truck squid. Butcher raw denim chartreuse forage, tattooed occupy bitters church-key. Marfa meggings farm-to-table selfies, art party PBR&amp;B shoreditch dreamcatcher. </p> </div> <div class="tab-item-2"> <p> Dreamcatcher affogato leggings fanny pack. Umami readymade selvage brooklyn vice. Thundercats williamsburg drinking vinegar, synth four dollar toast twee everyday carry. Hella small batch narwhal, tilde kitsch salvia ethical mustache iPhone williamsburg fap vegan. </p> </div> <div class="tab-item-3"> <p> Tote bag chillwave messenger bag, single-origin coffee schlitz +1 thundercats lomo. Selvage try-hard viral, pug tattooed tote bag actually typewriter normcore four dollar toast lumbersexual. Put a bird on it mixtape single-origin coffee food truck biodiesel, bicycle rights butcher deep v. Narwhal 90's swag authentic. Kombucha everyday carry cronut fanny pack keytar next level. </p> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Tabs Concept - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
*,
*:before,
*:after { box-sizing: border-box;
}
html { padding-top: 50px; font-family: 'Raleway', Helvetica, arial, sans-serif; background-color: #eeeeee;
}
.header { text-align: center;
}
.header a { text-decoration: none; color: #bd9ba7;
}
/*-------------------------------------------------------------------*/
.wrapper { width: 100%; max-width: 75rem; margin: 0 auto; padding: 2rem;
}
.tab-controls { text-align: center; width: 100%; margin: 0; padding: 0 0 1rem; border-bottom: 1px solid #fefefe;
}
@media (min-width: 40rem) { .tab-controls { display: inline-block; padding: 0; border: none; }
}
.tab-controls li { display: block;
}
@media (min-width: 40rem) { .tab-controls li { position: relative; display: inline-block; padding: 0 1rem; } .tab-controls li:after { content: ''; display: block; position: absolute; top: 50%; left: 100%; width: 2px; height: 15px; background: #fefefe; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tab-controls li:last-of-type:after { content: none; }
}
.tab-controls a { font-size: 1.2rem; color: #8e747d; text-transform: uppercase; text-decoration: none; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
.tab-controls a:hover, .tab-controls a.active { color: #ceb4bd;
}
[class^='tab-item-']:not(:first-of-type) { display: none;
}
@media (min-width: 40rem) { [class^='tab-item-'] { font-size: 1.2rem; line-height: 2; }
}

Simple Tabs Concept - Script Codes JS Codes

$('.tab-controls a').on('click', function(e) { e.preventDefault(); // Remove active class from buttons $('.tab-controls a').removeClass('active'); // Add the correct active class $(this).addClass('active'); // Hide all tab items $('[class^=tab-item]').hide(); // Show the clicked tab var num = $(this).data('tab-item'); $('.tab-item-'+num).fadeIn();
});
Simple Tabs Concept - Script Codes
Simple Tabs Concept - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 3
Size 4,038 Kb
Views 4,048
Do you need developer help for Simple Tabs Concept?

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!

Kyle Brumm (kjbrum) Script Codes
Name
3D Parallax Boxes
Subtle Menu Animation
Dotted Menu Concept
_toolbox.scss
Stacked Cards Hover Effects
Simple Accordion Concept
Wavy Loading Animations
Stylish Brand Buttons
CSS3 Stylish Checkboxes
3D Orbiting Split Images
Create amazing Facebook ads 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!