（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. [转载] 使用StAX解析xml

    StAX 概述 从一开始,Java API for XML Processing (JAXP) 就提供了两种方法来处理 XML:文档对象模型(DOM)方法是用标准的对象模型表示 XML 文档:Simp ...

  2. SpringData Jpa、Hibernate、Jpa 三者之间的关系

    JPA规范与ORM框架之间的关系是怎样的呢? JPA规范本质上就是一种ORM规范,注意不是ORM框架--因为JPA并未提供ORM实现,它只是制订了一些规范,提供了一些编程的API接口,但具体实现则由服 ...

  3. H3C 配置路由器作为FTP客户端

  4. vue-cli起项目步骤

    1.全局安装 vue-cli 老版本:npm install -g vue-cli  (npm uninstall vue-cli -g 卸载) 新版本:npm install -g @vue/cli ...

  5. hibernate_检索策略

    一.概述 检索策略分三大块,类级别检索策略和关联级别检测策略. 类级别检索策略:get.load. 关联级别检索策略:order.getCustomer().getName() 上面这两种应该是看得懂 ...

  6. vue(axios)封装，content-type由application/json转换为application/x-www-form-urlencoded

    现在主流的http请求头的content-type有三种(不讨论xml): application/x-www-form-urlencoded  最常见的提交数据方式,与原生form表单数据一致,在c ...

  7. lombok工作原理分析

    在Lombok使用的过程中,只需要添加相应的注解,无需再为此写任何代码.但是自动生成的代码到底是如何产生的呢? 核心之处就是对于注解的解析上.JDK5引入了注解的同时,也提供了两种解析方式. 运行时解 ...

  8. eclipse中SSM(maven)项目搭建全过程+实现用户登录功能

    项目创建之前确保eclipse中已经配置好了jdk,tomcat,maven如果没有配置下面有配置教程的链接   eclipse中配置jdk的教程url:http://www.cnblogs.com/ ...

  9. P3225 [HNOI2012]矿场搭建 题解

    这道题挺难的,可以加深对割点的理解,还有,排列组合好重要了,分连通块,然后乘法原理(加法原理计数什么的) 传送门   https://www.luogu.org/problem/P3225 省选oi题 ...

  10. Spring Boot 整合 slf4j+log4j2 实现日志管理

    背景 Java 中比较常用的日志框架: log4j(Log for Java):Apache 的一个开源项目,七种日志级别:OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE ...