zoukankan      html  css  js  c++  java
  • 页面跳转内容局部样式改变

    实现效果如下:

    实现代码如下:

    <!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>
  • 相关阅读:
    deepin/uos和局域网其他机器无法ping通
    Ubuntu18.04完全卸载vscode
    批量拉取github组织或者用户的仓库
    vmware uos挂载windows共享目录
    清空容器另类方式
    time_t 时间格式化字符串
    条件变量condition_variable
    C++多维堆数组定义
    arm64 ubuntu18.04 bionic安装bcc tools
    win10下载编译chromium
  • 原文地址:https://www.cnblogs.com/lidyfamily/p/11585399.html
Copyright © 2011-2022 走看看