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

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

ajax实现简单的点击左侧菜单，右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
Android 8.1 SystemUI虚拟导航键加载流程解析
需求基于MTK 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加思路需求开始做之前,一定要研读SystemUI Navigation模块的代码流程!!!不要直接去网上copy别人改的需 ...
web.xml之context-param,listener,filter,servlet加载顺序及其周边
先以加载spring为例子看看加载顺序的作用: Spring加载可以利用ServletContextListener 实现,也可以采用load-on-startup Servlet 实现,但比如fil ...
web.xml的contextConfigLocation作用及自动加载applicationContext.xml
web.xml的contextConfigLocation作用及自动加载applicationContext.xml 转自:http://blog.csdn.net/sapphire_aling/ar ...
web应用启动的时候SpringMVC容器加载过程
 <servlet> <servlet-name>springmvc</servlet-name> ...
java调用phantomjs采集ajax加载生成的网页
java调用phantomjs采集ajax加载生成的网页日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...
如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
[转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部
本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...
玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)
关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...

随机推荐

win10 uwp 依赖属性
本文告诉大家如何使用依赖属性,包括在 UWP 和 WPF 如何使用. 本文不会告诉大家依赖属性的好处,只是简单告诉大家如何使用在 UWP 和 wpf ,如果需要创建自己的依赖属性,可以使用代码片,在 ...
H3C 公有地址和私有地址
redis_Cacha 爬虫链接redis配置文件
import redisimport json class RedisCache(object): """ 使用redis进行爬虫结果的缓存,并可以进行增量爬取 &quo ...
java 文件拷贝
需求:源和目标! 那么我们需要源文件和目标文件! 构建管道的时候就需要两个:输出流和输入流管道! Eg: package july7file; //java7开始的自动关闭资源 import java ...
C# 通过 probing 指定 dll 寻找文件夹
在很大的项目开发,会发现项目引用的 dll 会很多,我想要按照不同的功能,将不同的 dll 放在不同的文件夹简单的方法是通过修改 App.config 文件指定文件夹,如将文件移动到 abc\12 ...
H3C设置时间--用户视图下
<H3C>clock datetime ? TIME Specify the time (HH:MM:SS) <H3C>clock datetime 19:29:00 ? ...
ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（1）之数据库设计
本文主要讲解本项目网站所应用到的知识点,及数据库的相关设计: 一.知识点 (1)本项目主要采取ASP.NET MVC的编程模式,相信你已经了解到了MVC的具体含义是什么,这里不再赘述,有不了解的朋友, ...
boostrap-非常好用但是容易让人忽略的地方【6】：role属性
普通样式,鼠标hover没有任何效果 <span>content</span> 加上role属性的样式,鼠标hover会有cursor:pointer的效果 <span ...
CentOS 7 端口白名单设置
# 查看白名单列表 firewall-cmd --zone=public --list-ports # 添加白名单端口 firewall-cmd --zone=public --add-port=/t ...
Java面试思路
一.javaSE基础 1.java IO流 2.java NIO 3.java集合 4.java注解 5.java泛型 6.java反射 7.java多线程 8.常用String.数组.日期操作二. ...