jquery控制来实现简单的分页效果，只是简单实现，不考虑简化和兼容的问题
通过监听鼠标点击元素来改变类实现，不过每一个要展示的内容需要设置一个和按钮位置一样的ID，可以简化，但没必要
下面是html源码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery/jquery.js"></script>
<style>
.top a {
margin: 0;
padding: 1em 2em;
background-color: rgb(109, 184, 255);
color: rgb(235, 235, 235);
transition: .5s;
}
.top a.act,
.top a:hover {
background-color: rgb(25, 151, 255);
color: azure;
}
.top ul li {
display: none;
}
.top ul li.act {
display: block;
}
</style>
<script>
$(document).ready(function() {
$(".top a").click(function() {
$(".top a").removeClass("act")
$(".top ul li").removeClass("act")
let a = $(this).attr('id')
$(this).addClass("act")
$(".top ul li#" + a).addClass("act")
})
})
</script>
</head>
<body>
<div class="top">
<center><a id="home" class="act">首页</a><a id="b">菜单2</a><a id="c">菜单2</a><a id="d">菜单3</a></center>
<ul>
<li id="home" class="act">
<h1>首页标题</h1>
</li>
<li id="b">
<p>一些内容</p>
</li>
<li id="c">
<p>另一些内容</p>
</li>
<li id="d">
<p>关于内容</p>
</li>
</ul>
</div>
</body>
</html>jquery我是相对路径引用的，可以引用百度CDN
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
这个代码只是个启发，展示出来并不代表很好
