ajax实现简单的点击左侧菜单,右侧加载不同网页

实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可)

图片.png

原理:ajax的局部刷新原理:通过.load()重新加载页面中的某一部分,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,因为地址有变,所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

遇到ajax局部刷新的需求也有很多,有时候比较简单,当内容较少,适合做成选项卡,如果网页的左侧有一个列表,点击列表使右侧的内容进行切换,如果右侧的内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了,在项目中经常使用到流程管理后台,便是左右结构布局,这个时候,简单的demo示例如下

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

    <head>
        <title>ajax局部刷新</title>
        <style>
            .userMenu {
                float: left;
                width: 200px;
            }
            
            #content {
                float: left;
            }
        </style>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

    </head>

    <body>
        <div class="userWrap">
            <ul class="userMenu">
                <li class="current" data-id="center">用户中心</li>
                <li data-id="account">账户信息</li>
                <li data-id="trade">交易记录</li>
                <li data-id="info">消息中心</li>
            </ul>
            <div id="content"></div>
        </div>
    </body>
    <script>
        $(function() {
            $(".userMenu").on("click", "li", function() {
                var sId = $(this).data("id"); //获取data-id的值
                window.location.hash = sId; //设置锚点
                loadInner(sId);
            });

            function loadInner(sId) {
                var sId = window.location.hash;
                var pathn, i;
                switch(sId) {
                    case "#center":
                        pathn = "user_center.html";
                        i = 0;
                        break;       
                    case "#account":
                        pathn = "user_account.html";
                        i = 1;
                        break;
                    case "#trade":
                        pathn = "user_trade.html";
                        i = 2;
                        break;
                    case "#info":
                        pathn = "user_info.html";
                        i = 3;
                        break;      
                    default:
                        pathn = "user_center.html";
                        i = 0;
                        break;
                }
                $("#content").load(pathn); //加载相对应的内容
                $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
            }
            var sId = window.location.hash;
            loadInner(sId);
        });
    </script>

</html>

创建右侧对应的几个新的html页面user_center.html,user_account.html,user_trade.html,user_info.html

user_center.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
  用户中心
  用户中心
  用户中心
  
</div>
    </body>
</html>
user_account.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
  账户信息
  账户信息
  账户信息
 
</div>
    </body>
</html>
user_trade.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
  交易中心
  交易中心
  交易中心
</div>
    </body>
</html>

user_info.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
 消息中心
 消息中心
 消息中心

</div>
    </body>
</html>

90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。 原文作者:祈澈姑娘 原文链接:https://www.jianshu.com/u/05f416aefbe1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏针针小站

【Skill】宝塔Linux面板配合 七牛对象储存 进行网站日常备份

1772
来自专栏码代码的陈同学

Rancher某环境所有主机网络瘫痪问题

本文记录Rancher整个环境因一台主机网络问题导致环境中所有主机网络瘫痪,无法跨主机通讯问题。

3013
来自专栏Coco的专栏

【nodeJS爬虫】前端爬虫系列 -- 小爬「博客园」

2088
来自专栏互联网杂技

mysql安装--基础教程(一)

mysql是一个开源的数据库,安装的话,可以直接到官方网站, 正大光明的下载,自豪的安装; 如果你的电脑是window,你就下载window的版本; 如果是的系...

3626
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器 好,我个人推荐大家使用 atom 编辑器,第一是免费,第二是好看,第三是好用。 安装...

4348
来自专栏FreeBuf

漏洞预警|Samba远程代码执行漏洞,影响7年前版本

Samba是Linux和UNIX系统的SMB协议服务软件,可以实现与其他操作系统(如:微软Windows操作系统)进行文件系统、打印机和其他资源的共享。此次漏洞...

2267
来自专栏云计算教程系列

CentOS 如何配置NTP加入NTP池项目

准确的计时对于几乎所有服务或软件都至关重要。在分布式平台上运行的电子邮件,记录器,事件系统和调度程序,用户身份验证机制和服务都需要准确的时间戳来按时间顺序记录事...

1530
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性。主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5...

2308
来自专栏不二小段

【爬虫军火库】AnyProxy安装使用【Windows】

分析网络请求详情是写爬虫应用的初始步骤,抓包便是一种十分强大的分析手段,尤其是对手机App进行抓包,往往能收获到Web端没有的API接口。抓包的工具多种多样,功...

1.7K6
来自专栏Timhbw博客

Hexo-完全免费全平台搭建个人博客(1)-整体搭建

2017-03-0911:04:17 发表评论 2,405℃热度 几个月前就想写这篇文章了,很多人也让我写过,也帮很多人搭建过,但是一直没时间纪录下来,这次有...

7659

扫码关注云+社区