实现效果如下：

 

 

实现代码如下：

<!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; width: 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; width: 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; width: 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; width: 300px; height: 100px">
                        方法二:食堂
                    </div>
                </div>
                <!-- 宿舍 -->
                <div class="recruitedpage page" style="display: none;">
                    <div style="background-color: teal; width: 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>