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


原理：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>

注：

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

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

ajax实现简单的点击左侧菜单，右侧加载不同网页的更多相关文章

  1. web实现点击左侧导航，右侧加载不同的网页（这种布局多用于后台管理系统）

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

  2. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  3. Scrapy爬取Ajax（异步加载）网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  4. vue实现menu菜单懒加载

    本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...

  5. 实现点击不同的按钮加载不同的css

    这段时间做一个小网站发现有时候特别需要点击不同的按钮去加载不同的css,这样可以确定点击的是哪个,由于每个按钮都是从后端数据库加载过来的,不仅是简简单单的用id或者是类名,用过this也不行: 前端加 ...

  6. ajax在jQuery中的应用 （1）加载异步数据

  7. 简单的ListView中item图片异步加载

    前言:     在android开发当中,从目标地址获取图片往往都是采用异步加载的方法.当完全加载完图片后在进行显示,也有些是直接将加载的图片一点一点的显示出来. 这两个区别只是对流的处理不同而已.现 ...

  8. Jquery ajax 与 lazyload的混合使用（实现图片异步加载）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...

随机推荐

  1. Codefroces 849 A,B

    A. Odds and Ends time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. 笔记本E450机械硬盘数据迁移到固态硬盘

    背景: E450机械硬盘使用速度过慢,但E450只有一个SATA位,无法直接使用 “分区助手”迁移. 处理: 1.将固态硬盘通过USB口外接在笔记本上 2.正常打开E450,进入桌面 3.对固态硬盘进 ...

  3. IDEA 热启动，每次更改代码后不用重启服务

    1.ctrl+Shift+Alt+/,选择Registry 2.勾选 compiler.automake.allow.when.app.running(可能不按首字母排序,可以多找找) 3.Setti ...

  4. python调用Java代码，完毕JBPM工作流application

    1.缘由 有一庞大Python django webproject,要引入工作流引擎,像OA一样.方便的流程控制与管理.Python或django关于工作流的开源插件,稀少,并且弱爆了,终于选用jav ...

  5. 关于bootstrap IE8的兼容性问题

    非常久没有写技术类的文章了.这几天在用bootstrap来做我们站点的UI框架,感觉还是不错的.只是遇到一点不大不小的问题,那就是有朋友在IE8下訪问我们的站点.界面变成了跟手机浏览一样的界面. 后来 ...

  6. cocos2d-x 3.2 之 2048 —— 第一篇

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  7. Extjs在HtmlEditor的工具栏上插入自定义按钮

    Ext.ns('Ext.ux.form.HtmlEditor');Ext.ux.form.HtmlEditor.HR =Ext.extend(Ext.util.Observable,{ init:fu ...

  8. js设计模式--------基本概念的理解

    1.闭包,前面已经说过,这里不再做说明 2.封装    对于JS而言,他不像java一样存在私有,公有 ,可以让对象在一些细节方面存在差异,降低他们的耦合程度,对数据做一些约束,我们可以更容易调试,封 ...

  9. Entity Framework的原理及使用方式

    ADO.NET Entity Framework操作数据库的过程对用户是透明的(当然我们可以通过一些工具或方法了解发送到数据库的SQL语句等).我们唯一能做的是操作EDM,EDM会将这个操作请求发往数 ...

  10. Oracel 格式化日期 to_char()

    select empno,ename,job,mgr,to_char(HIREDATE,'yyyy-mm-dd') as 入职日期,sal,comm,deptno from emp order by ...