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>