实现效果如下：
实现代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>页面局部刷新</title> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_1429964_heyq5056bjl.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.js"></script> <!-- 页面局部刷新CSS --> <style type="text/css"> ul> li{ float: left; background: #fff; box-shadow: 1px 1px 3px #ccc; } .current{ float: left; background: #fff; border-top: 3px solid #007ffc; } </style> </head> <body> <!-- 方法一:引用框架,不用JS --> <!-- 此处的DIV只做前后分隔用 --> <div class="m-5"> <!-- 引用框架实现跳转 --> <nav> <!-- 按钮 --> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">省份</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">城市</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">县/区</a> </div> </nav> <!-- 内容 --> <div class="tab-content" id="nav-tabContent"> <!-- 省份 --> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div style="background-color: skyblue; 300px; height: 100px">方法一:省份</div> </div> <!-- 城市 --> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <div style="background-color: pink; 300px; height: 100px">方法一:城市</div> </div> <!-- 县/区 --> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <div style="background-color: yellow; 300px; height: 100px">方法一:县/区</div> </div> </div> </div> <!-- 方法二:使用CSS+DIV+JS --> <!-- 此处的DIV只做前后分隔用 --> <div class="py-5"> <!-- 页面局部刷新DIV --> <div class="container-fluid"> <div class="m-4"> <!-- 食堂/宿舍按钮 --> <div class="row examine"> <div class="col-4"> <ul class="list-unstyled text-center ul"> <li class="py-3 recruiting"> <span class="px-5 btn" value="recruiting">食堂</span> </li> <li class="py-3 recruited"> <span class="px-5 btn" value="recruited">宿舍</span> </li> </ul> </div> <div class="col-8"></div> </div> <!-- 食堂 --> <div class="recruitingpage page"> <div style="background-color: pink; 300px; height: 100px"> 方法二:食堂 </div> </div> <!-- 宿舍 --> <div class="recruitedpage page" style="display: none;"> <div style="background-color: teal; 300px; height: 100px"> 方法二:宿舍 </div> </div> </div> </div> <!-- 页面局部刷新JS --> <script type="text/javascript"> $('.btn').click(function(){ var pageName = $(this).attr('value'); var pageClass = '.'+pageName+'page'; $('.btn').css('background',''); $('.page').css('display','none'); $(pageClass).css('display','block'); }) //为列表按钮添加点击事件 $("ul.ul").on("click","li",function(){ $("ul.ul > li").removeClass("current"); $(this).addClass("current"); }); // 默认点击第一个 $('ul.ul>li:first-child').trigger('click'); </script> </div> </body> </html>