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>

  

原文地址:https://www.cnblogs.com/dreamstartplace/p/10785725.html

时间: 2024-09-30 23:52:00

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

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

需求 基于MTK 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加 思路 需求开始做之前,一定要研读SystemUI Navigation模块的代码流程!!!不要直接去网上copy别人改的需求代码,盲改的话很容易出现问题,然而无从解决.网上有老平台(8.0-)的讲解System UI的导航栏模块的博客,自行搜索.8.0对System UI还是做了不少细节上的改动,代码改动体现上也比较多,但是总体基本流程并没变. 源码阅读可以沿着一条线索去跟代码,不要过分在乎代码细节!例如我客制化这个需

java web.xml listener servlet 和filter的加载顺序

在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. 最终得出的结论是:listener -> filter -> servlet 同时还存在着这样一种配置节:context-param,它用于向 Servle

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

先以加载spring为例子看看加载顺序的作用: Spring加载可以利用ServletContextListener 实现,也可以采用load-on-startup Servlet 实现,但比如filter 需要用到 bean ,但加载顺序是: 先加载filter 后加载spring,则filter中初始化操作中的bean为null:所以,如果过滤器中要使用到 bean,此时就可以根据加载顺序listener>filter>servlet,将spring 的加载 改成 Listener的方式.

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

<!-- 配置DispatcherServlet --> <servlet> <servlet-name>springmvc</servlet-name> <!-- DispatcherServlet类的全限定类名 --> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> &

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

java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应的内容,可是我的浏览器看到的内容明明是有的,于是浏览器查看源代码也发觉没有,此时想起该网页应该是ajax加载的.不知道ajax的小朋友可以去学下web开发啦. 采集ajax生成的内容手段不外乎两种.一种是通过http观察加载页面时候的请求,然后我们模仿该请求去得到对应的内容,第二种则是模仿浏览器行为

(转)解决Eclipse加载图片或网页出现404错误

(转)解决Eclipse加载图片或网页出现404错误 原文链接如下: https://blog.csdn.net/qq_39893313/java/article/details/82589670 随着网页的数目加多,建文件的个数增多,图片或网页的加载出现404错误 例如 index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UT

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

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

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 1 <script src="1.js"></script> 2 <script src="2.js"></script> 3 <script src="3.js">

iframe 点击左侧导航列表 右侧出现对应界面

HTML 代码结构如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <ul> <li><a href="http://www.w3school.com.c