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

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

（3）适用场景：遇到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>

　　

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

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

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

  2. Android 8.1 SystemUI虚拟导航键加载流程解析

    需求 基于MTK 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加 思路 需求开始做之前,一定要研读SystemUI Navigation模块的代码流程!!!不要直接去网上copy别人改的需 ...

  3. web.xml之context-param,listener,filter,servlet加载顺序及其周边

    先以加载spring为例子看看加载顺序的作用: Spring加载可以利用ServletContextListener 实现,也可以采用load-on-startup Servlet 实现,但比如fil ...

  4. web.xml的contextConfigLocation作用及自动加载applicationContext.xml

    web.xml的contextConfigLocation作用及自动加载applicationContext.xml 转自:http://blog.csdn.net/sapphire_aling/ar ...

  5. web应用启动的时候SpringMVC容器加载过程

    <!-- 配置DispatcherServlet --> <servlet> <servlet-name>springmvc</servlet-name> ...

  6. java调用phantomjs采集ajax加载生成的网页

    java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...

  7. 如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  8. [转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部

    本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...

  9. 玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)

    关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...

随机推荐

  1. Python--day42--mysql创建用户及授权

    1,打开mysql数据库命令:mysql -u root -p 2,创建数据库create database db2; 2,删除数据库drop database db2; 2,展示有多少个文件夹:sh ...

  2. git update-index --assume-unchanged

    有的时候,不小心提交了一个配置文件config.php,每次在本地开发测试之后,都需要更改配置文件.相当麻烦. 使用 git update-index --assume-unchanged   /pa ...

  3. es6 let和const的用法

    ]()) {; } //console.log(MAX);//MAX is not defined" /*也有暂时性死区,声明的位置需要在使用前面,否则报错: * 不能重复声明变量 * */ ...

  4. win10 uwp 在 VisualStudio 部署失败，找不到 Windows Phone 可能的原因

    在我使用 VisualStudio 调试的时候,发现我插入了手机,但是 VisualStudio 在部署的时候找不到手机. 可能的原因是 手机禁用了连接,第二个原因是可能手机驱动没正确让 Visual ...

  5. 备战省赛组队训练赛第十七场(UPC)

    upc:传送门 A: 题解[1] G: 题解[1] D,G,H,J,L 题解 by 鲁东大学

  6. ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（10）之素材管理

    源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 素材管理模块也是我们这个 ...

  7. CentOS yum有时出现“Could not retrieve mirrorlist ”的解决办法——resolv.conf的配置

    国内服务器在运行命令yum -y install wget的时候,出现: Could not retrieve mirrorlist http://mirrorlist.centos.org/?rel ...

  8. Educational Codeforces Round 63部分题解

    Educational Codeforces Round 63 A 题目大意就不写了. 挺简单的,若果字符本来就单调不降,那么就不需要修改 否则找到第一次下降的位置和前面的换就好了. #include ...

  9. windows系统锁屏及修改密码项目开发经验记录

    改造windows开机.锁屏登录流程需要使用微软停供的Credential Providers工程,编译出来是dll,安装在C:\windows\system32目录下,然后注册注册表(运行工程生成的 ...

  10. 第二阶段：1.流程图：11.PPT绘制页面流程图

    产品经理主要绘制两个图:1.业务流程图(谁在什么条件下完成什么任务)2.页面流程图(具体到产品呈现的功能设计等等细节方面) 选择插入 选择流程图中的形状 设置两个矩形 同时添加不同的背景色 添加文本框 ...