In this blog I build tabbed contents using CSS and jQuery, Tabbed content is a beautiful way of displaying the content in the precise and concise manner. This structure could be possible using the unordered list that act as a tabbed in a row and the content will display in the list form followed by the tabbed having the same background color that will control each section of the list by using jQuery and CSS property "display:none". The active div will acquire the property of highlighted tabbed and the jQuery function will show and hide the content area when used fire the .click() function.
Below is the simple line of code that will help user to understand the structure of the tabbed content.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>jquery tabs</title>
<style>
body{
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container{
width: 800px;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color:red ;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.active{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.active{
display: inherit;
}
p{
color: red; font-weight: 600;
border-bottom: 5px solid #32c896;
font-weight: 400;
margin-bottom: 30px;
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="tab-link active" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content active">
<p>This is tab First</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content">
<p>This is tab Second</p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
<p>This is tab Third</p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content">
<p>This is tab Fourth</p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div><!-- container -->
<script>
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
})
})
</script>
</body>
</html>
Output:- Download the link for getting the output on your screen.keep codding:)
0 Comment(s)