版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41376740/article/details/82056123
效果图
代码
用了简单的bootstrap 和 jQuery，简单实现了ajax的页面内容跳转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.引入css文件-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--2.引入JQuery文件-->
<script src="js/jquery-3.3.1.js"></script>
<!--3.引入BootStrap.js文件-->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-2" id="left-content">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel panel-heading">
<h4 class="panel-title" style="text-align: center;">
<a data-toggle="collapse" href="#content-one">分类1</a>
</h4>
</div>
<div id="content-one" class="panel-collapse collapse in">
<div class="panel-body" style="text-align: center">
<div class="left-menu">
<a href="javascript:;" onclick="$.turnPage(1)">去往1.tml</a>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel panel-heading">
<h4 class="panel-title" style="text-align: center;">
<a data-toggle="collapse" href="#content-two">分类2</a>
</h4>
</div>
<div id="content-two" class="panel-collapse collapse in">
<div class="panel-body" style="text-align: center">
<div class="left-menu">
<a href="javascript:;" onclick="$.turnPage(2)">去往2.tml</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-body" id="right-content">
</div>
</div>
</div>
</div>
<script>
$.func = {};
$.turnPage = function (target) {
let url = window.location.href;
let num = url.lastIndexOf("/");
let prefix;
if (num === -1) {
prefix = url;
} else {
prefix = url.slice(0, num);
}
let newUrl = prefix + '/' + target + ".html";
$.ajax({
type: "post",
url: newUrl,
success: function (html) {
$('#right-content').html(html)
}
})
};
</script>
</body>
</html>