jquery实现地址栏哈希值变化中间部分改变头部尾部不变类似路由效果

卷新心菜

于 2023-05-06 16:24:05 发布

阅读量222

点赞数 1

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/aaa_div/article/details/130528972

版权

该文章介绍了一个使用jQuery维护的官网项目，通过$().load()方法实现在地址栏回退前进时，仅中间内容区域变化，头部和尾部保持不变，从而达到类似Vue组件的局部刷新效果，同时提到了需要VSCode的LiveServer插件来避免加载错误。

摘要由CSDN通过智能技术生成

项目场景：

最近维护了一jquery写的官网项目，记录一下js地址栏回退前进切换效果页面头部尾部不变化只有中间部分变化刷新页面不丢失的效果。有点像vue的组件可以把一个页面的代码写在一个文件

先看一下效果

解决方案：

中间部分切换用到了 $().load()方法可以加载本地的文件（ps：使用这个方法加载需要借助vscode的livesever插件才能打开，否则会报错）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>

    <!-- seo -->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!-- Main CSS -->
    <link href="./assets/css/bootstrap.css" rel="stylesheet" />
</head>

<body>
    <header class="header">
        <div class="w">
            <ul class="nav">
                <li class="navItem" data-page='home' data-url="page/home.html">首页</li>
                <li class="navItem" data-page='pageOne' data-url="page/pageOne.html">页面一</li>
                <li class="navItem" data-page='pageTwo' data-url="page/pageTwo.html">页面二</li>
                <li class="navItem" data-page='pageThree' data-url="page/pageThree.html">页面三</li>
            </ul>
        </div>

    </header>
    <div class="maincontent w">
        
    </div>
    <footer class="bg-footer">
        <div class="w">footer页面内容</div>
    </footer>
</body>
<!--JAVASCRIPTS-->
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //页面刚开始的调用一下 防止刷新的时候页面丢失
        loadContent()
    })

    //类似路由
    function loadContent() {
        //主要是获取地址栏的哈希值
        let obj = getUrl()
        let page = obj.hash
        switch (page) {
            case '':
                $('.maincontent').load('page/home.html');
                break;
            case 'pageOne':
                $('.maincontent').load('page/pageOne.html');
                break;
            case 'pageTwo':
                $('.maincontent').load('page/pageTwo.html');
                break;
            case 'pageThree':
                $('.maincontent').load('page/pageThree.html');
                break;
            case 'home':
                $('.maincontent').load('page/home.html');
                break;
            case 'details':
                $('.maincontent').load('page/details.html');
                break;
            default:
                $('.maincontent').load('page/home.html');
        }
        let menu = $('.navItem');
        menu.each(function () {
            $(this).removeClass('active');
            let current = $(this).data('page');
            if (current == page) {
                $(this).addClass('active');
            }
        });

    }

    /*
    * 获取地址栏参数
    */
    function getUrl() {
        let urlObj = {}
        let url = window.location.href
        // let url = 'http://127.0.0.1:5501/index.html#home/new?id=2&name=hahaah'
        let hashVaule = url.split('#')
        urlObj['oldUrl'] = hashVaule[0]
        if (hashVaule[1]) {
            let paramStr = hashVaule[1].split('?')
            if (paramStr[0]) {
                let hashArr = paramStr[0].split('/')
                urlObj['hashArr'] = hashArr
            }
            if (paramStr[1]) {
                urlObj['paramStr'] = paramStr[1]
                let paramsArr = paramStr[1].split('&')
                let paramsObj = {}
                paramsArr.forEach(v => {
                    let arr = v.split('=')
                    paramsObj[arr[0]] = arr[1]
                })
                urlObj['params'] = paramsObj
            }
            urlObj['hash'] = paramStr[0]
        }
        return urlObj
    }
    
    //导航栏点击事件
    $('.navItem').click(function () {
        $('.navItem').removeClass('active');
        $(this).addClass('active');
        const dataUrl = $(this).data('url');
        const page = $(this).data('page');
        let obj = getUrl()
        window.location.href = obj.oldUrl + '#' + page
    });

    //监听href变化 触发更新
    window.onhashchange = function (params) {
        loadContent()
    };
</script>

</html>

卷新心菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现地址栏哈希值变化中间部分改变头部尾部不变类似路由效果

最近维护了一jquery写的官网项目，记录一下js地址栏回退前进切换效果页面头部尾部不变化只有中间部分变化刷新页面不丢失的效果。有点像vue的组件可以把一个页面的代码写在一个文件
复制链接

扫一扫