h5 history 案例

最新推荐文章于 2022-01-30 20:27:05 发布

天马行空zqzq

最新推荐文章于 2022-01-30 20:27:05 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/105992963

版权

template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #F7F7F7;
            font-family: Arial;
        }
        header {
            background: #242424;
            border-bottom: 1px solid #000;
        }
        .wrapper{
            width: 1100px;
            height: 70px;
            margin: 0 auto;
        }
        header .wrapper h1{
            float: left;
            width: 176px;
            height: 69px;
            background: url(images/topbar.png) no-repeat 0 0;
            font-size: 0;
        }
        header .wrapper ul{
            list-style:none;
        }
        header .wrapper ul li{
            float: left;
            height: 70px;
        }
        header .wrapper ul li.now,
        header .wrapper ul li:hover{
            background: #12b7f5;
        }
        header .wrapper ul li a{
            padding: 0 20px;
            display: block;
            color: #fff;
            line-height: 70px;
            text-decoration: none;
        }

        .content{
            width: 1100px;
            margin: 0 auto;
            font-size: 100px;
            text-align: center;
        }

    </style>
</head>
<body>
<header>
    <div class="wrapper">
        <h1>网易云音乐</h1>
        <ul>
            <li data-page="index" class="<?php echo $page=='index'?'now':'' ?>" ><a href="index.php">发现音乐</a></li>
            <li data-page="my"  class="<?php echo $page=='my'?'now':'' ?>"><a href="my.php">我的音乐</a></li>
            <li data-page="friend" class="<?php echo $page=='friend'?'now':'' ?>"><a href="friend.php">朋友</a></li>
        </ul>
    </div>
</header>
<div class="content">
    <?php echo $html ?>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

index.js

//ajax封装
var render = function(page){
    $.ajax({
        type:'get',
        url:'api/data.php',
        data:{
            page:page || "index"
        },
        dataType: 'json',
        success:function(res){
            //选出带这个属性的元素，删除这个类
            $('[data-page]').removeClass('now');
            $('[data-page="'+res.page+'"]').addClass('now');
            $('.content').html(res.html);
        }
    });
};
$(function(){
    /*1.ajax异步加载 渲染页面*/
    /*2.渲染什么页面需要和后台提供的地址保持一致*/
    $('.wrapper').on('click','a',function(){
        // 渲染页面   页面标识
        var page = $(this).parent().data('page');
        render(page);
        //地址保持一致
        //追加地址，而且这个地址后台一定要存在
        var historyUrl = $(this).attr('href');
        history.pushState(null,null,historyUrl);
        return false;
    });
    //这一步只能让url地址和低下的内容改变，但实际的网页源代码没有改变
    /*3.切换历史渲染页面*/
    //监听切换历史
    window.onpopstate = function(){
        //获取地址栏信息
        var pathnme=location.pathname;
        var page='index';
        if(pathname.indexOf('index.php')>-1){
            page='index';
        }
        if(pathname.indexOf('my.php')>-1){
            page='my';
        }
        if(pathname.indexOf('friend.php')>-1){
            page='friend';
        }
        render(page);
    };
});

天马行空zqzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5 history 案例

template.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>history</title> <style> *{ padding: 0; ...
复制链接

扫一扫