Tabbed Content with jQuery and CSS
Example
Test1 Details
Test2 Details
Test3 Details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tab {
width:240px;
margin:50px;
}
.tab_menu {
clear:both;
}
.tab_menu li {
float:left;
text-align:center;
cursor:pointer;
list-style:none;
padding:1px 6px;
margin-right:4px;
background:#F1F1F1;
border:1px solid #898989;
border-bottom:none;
}
.tab_menu li.hover {
background:#DFDFDF;
}
.tab_menu li.selected {
color:#FFF;
background:#6D84B4;
}
.tab_box {
clear:both;
border:1px solid #898989;
height:100px;
}
.hide{
display:none
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(function () {
let $div_li = $(".tab_menu ul li");
$div_li.click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
let index = $(this).index();
$(".tab_box>div").eq(index).show().siblings().hide();
})
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
<div class="tab_box">
<div>Test1 Details</div>
<div class="hide">Test2 Details</div>
<div class="hide">Test3 Details</div>
</div>
</div>
</body>
</html> Most Helpful This Week
JavaScript HTML5 Validation for name and email field
How to scroll page to particular Div on click using jQuery?
How to set checkbox and radio option checked on load with jQuery?
JavaScript calculate Fahrenheit from Celsius
jQuery show input text inside div after on click event
How to define Global Variable in JavaScript?
Highlight and get the details of table row on click using JavaScript
jQuery check if an element is visible or hidden
Edit the text of label on click using jQuery
jQuery example of scroll to top