我写的代码比较简单,但是对于前端初级工程师有些帮助:查看路径 实际效果如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="title">
<div id="index" class="one">页面1
<div class="two">展示信息1</div>
</div>
<div id="zf" class="one">页面2
<div class="two">展示信息2</div>
</div>
<div id="gc" class="one">页面3
<div class="two">展示信息3</div>
</div>
<div id="hc" class="one">页面4
<div class="two">展示信息4</div>
</div>
<div id="shwt" class="one">页面5
<div class="two">展示信息5</div>
</div>
</div>
</body>
<script type="text/javascript" src="./jquery.min.js"></script>
<script>
$(".one").on('click',function(){
$(".active").find(".two").hide();
$(this).addClass("active").siblings().removeClass("active");
$(".active").find(".two").show();
})
</script>
</html>