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

最新推荐文章于 2023-12-19 10:17:04 发布

weixin_30950607

最新推荐文章于 2023-12-19 10:17:04 发布

阅读量2.2k

点赞数 1

文章标签： python javascript java ViewUI

原文链接：http://www.cnblogs.com/ting6/p/9725504.html

版权

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

图片.png

原理：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>

最低0.47元/天解锁文章

weixin_30950607

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
ajax实现简单的点击左侧菜单，右侧加载不同网页

实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）图片.png原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时...
复制链接

扫一扫