实现：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. noip 2018 day2 T1 旅行 基环树 tarjan

    Code: #include<cstdio> #include<cstring> #include<string> #include<stack> #i ...

  2. 织梦DedeCMS会员登录或退出后如何直接跳转到首页

    织梦dedecms默认情况下的会员登录后会直接跳转到会员中心,退出也是一样,但是如果我们想让会员登录后直接跳转到首页,那该如何实现呢? 经过我们的研究,已经找到解决办法,下面是详细的修改步骤: 首先在 ...

  3. SpringBoot @PathVariable 和 @requestParam区别

    1.若获取的入参的 参数 是下面这种形式 就使用 @requestParam 去获取 参数‘1’ /user?id=1 // url:xxx/user?id=1 @RequestMapping(&qu ...

  4. 带你玩转Visual Studio——性能分析与优化

    找到性能瓶颈 二八法则适合很多事物:最重要的只占其中一小部分,约20%,其余80%的尽管是多数,却是次要的.在程序代码中也是一样,决定应用性能的就那20%的代码(甚至更少).因此优化实践中,我们将精力 ...

  5. udacity android 学习笔记: lesson 4 part a

    udacity android 学习笔记: lesson 4 part a 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...

  6. （七十一）关于UITableView退出崩溃的问题和滚动究竟部的方法

    [TableView退出崩溃的问题] 近期在使用TableView时偶然发如今TableView中数据较多时,假设在滚动过程中退出TableView到上一界面.会引起程序的崩溃.经过网上查阅和思考我发 ...

  7. UVA 12493 Stars (欧拉函数--求1~n与n互质的个数）

    pid=26358">https://uva.onlinejudge.org/index.phpoption=com_onlinejudge&Itemid=8&cate ...

  8. HTML5学习笔记之二CSS基础

    一般来说,CSS都存储为一个文件.然后各个html page能够指定使用哪个CSS文件.这样这些html页面就能够保持一致的风格. 通常能够通过在head中加上一行指定CSS的链接. <!DOC ...

  9. ctags 寻找方法定义处

    ctags这个是vim的一个插件,它可以用来生成一个检索文件,里面保存有一些索引信息.例如,一些类跟方法.变量等的定义位置当我们对一个路径执行ctags -R的时候,就会自动生成一个ctags,然后我 ...

  10. vim基础学习之自动补全功能

    本章我们学习自动补全功能1.自动补全优先从当前的编辑区获得补全列表例如:我们写下如下内容 aaaaa aabbb aaab 当我们再次输入aa,然后我们按下Tab的时候,会弹出一个包含 aaaaa a ...