ajax实现简单的点击左侧菜单,右侧加载不一样网页

实现:ajax实现点击左侧菜单,右侧加载不一样网页(在整个页面无刷新的状况下实现右侧局部刷新,用到ajax注意须要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果便可)javascript


原理:ajax的局部刷新原理:经过.load()从新加载页面中的某一部分,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,由于地址有变,因此刷新的时候仍然会保持当前的页面内容而不是切换到第一个。css

遇到ajax局部刷新的需求也有不少,有时候比较简单,当内容较少,适合作成选项卡,若是网页的左侧有一个列表,点击列表使右侧的内容进行切换,若是右侧的内容过多,不适合作选项卡,这时候用.load()局部刷新最好不过了,在项目中常常使用到流程管理后台,即是左右结构布局,这个时候,简单的demo示例以下html

<!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>

注:
java

原文做者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工做中遇到的技术问题,坚持记录工做中所所思所见,欢迎你们一块儿探讨交流。jquery

关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

公众号回复“1”,拉你进程序员技术讨论群.程序员

相关文章
相关标签/搜索