<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding:0;list-style: none;}
#container{
width: 1000px;
margin: 0 auto;
border: 2px solid #000;
}
ul{display: flex;}
ul > li{
text-align: center;
line-height: 50px;
width: 20%;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
box-sizing: border-box;
}
li:last-child{border-right: 0;}
li:first-child{
color: #fff;
background: #000;
}
.con{
position: relative;
height: 400px;
}
.con div{
width: 100%;
height: 400px;
text-align: center;
line-height: 400px;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}
.con .con1{background-color: dodgerblue; display: block;}
.con .con2{background-color: tomato;}
.con .con3{background-color: lawngreen;}
.con .con4{background-color: darkseagreen;}
.con .con5{background-color: turquoise;}
</style>
</head>
<body>
<div id="container">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
<li>MENU4</li>
<li>MENU5</li>
</ul>
<div class="con">
<div class="con1">content1</div>
<div class="con2">content2</div>
<div class="con3">content3</div>
<div class="con4">content4</div>
<div class="con5">content5</div>
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$("ul li").on("click", function() {
var i = $(this).index();
// $(".con div").hide();
$(".con div").stop().fadeOut();
// $(".con div").eq(i).show();
$(".con div").eq(i).stop().fadeIn();
$(this).css({
"backgroundColor" : "#000",
"color" : "#fff"
}).siblings().css({
"backgroundColor" : "#fff",
"color" : "#000"
})
})
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.