点击菜单实现内容局部刷新

最新推荐文章于 2019-06-30 21:42:22 发布

Chepy2018

最新推荐文章于 2019-06-30 21:42:22 发布

阅读量1.4w

点赞数 2

分类专栏： JavaScript相关文章标签：前端 css html

本文链接：https://blog.csdn.net/sinat_36263705/article/details/73729954

版权

JavaScript相关专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原理：利用window.addEventListener("popstate", function(e) {});方法监听浏览器url的变化，判断当前的url动态局部刷新内容区域。(发现不太喜欢打字描述，还是直接贴代码好了。。。未来的我啊，回顾这段代码应该能看懂吧。)

<!DOCTYPE html>
<html>
<head>
    <title>点击菜单局部内容刷新</title>
        <meta charset="utf-8">
        <meta name="description" content="点击菜单局部内容刷新，支持前进后退" />
        <meta name="author" content="Chpeng" />
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <style type="text/css">
       html {
           background: #FAFAD2;
       }
       
       h2 {
           font-size: 35px;
           line-height: 55px;
           text-align: center;
           background: #c1d5eb;
           font-family: 'kaiti', 'microsoft yahei';
           text-shadow: 0px 1px 0px #f2f2f2;
       }
       
       .content {
           display: flex;
           height: 400px;
           width: 800px;
           margin: 50px auto;
           border: 1px solid #8F8F8F;
           border-top: 3px solid #8F8F8F;
       }
       
       .content-left {
           flex: 0 0 200px;
           background-color: #fafafa;
       }
       
       .content-right {
           flex: 1;
           line-height: 400px;
           font-size: 30px;
           background-color: #DEDEDE;
           text-align: center;
       }
       
       ul {
           margin: 0;
           padding: 0;
           width: 100%;
       }
       
       .menu {
           display: block;
           text-align: center;
           vertical-align: middle;
           height: 50px;
           line-height: 50px;
           /*border-bottom: 1px solid #787878; */
       }
       
       .menu a {
           display: block;
           text-decoration: none;
           color: #333;
           border-bottom: 1px solid #787878;
       }
       
       .menu:hover {
           background: #DEDEDE;
       }


       .active {
        background: #DEDEDE;
       }
        </style>
</head>


<body>
    <h2>ajax和history结合实现菜单局部刷新</h2>
    <div class="content">
        <!-- 左侧内容 -->
        <div class="content-left">
            <ul>
                <li class="menu">
                    <a href="#ajax?menuId=1" class="active">西湖区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=2">滨江区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=3">拱墅区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=4">上城区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=5">下城区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=6">萧山区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=7">余杭区</a>
                </li>
                <li class="menu">
                    <a href="#ajax?menuId=8">江干区</a>
                </li>
            </ul>
            </ul>
        </div>
        <!-- 右侧内容 -->
        <div class="content-right">
            欢迎来到西湖区！
        </div>
    </div>
    <script type="text/javascript">
   var areaJson = {
       1: "西湖区",
       2: "滨江区",
       3: "拱墅区",
       4: "上城区",
       5: "下城区",
       6: "萧山区",
       7: "余杭区",
       8: "江干区"
   };
   var activeId = 1;
    $(function() {
    var url = window.location.href;
    if(url.split("=").length > 1) {
    var id = url.split("=")[1];
    ajaxReq(id, $("ul .menu a[href='#ajax?menuId="+ id +"']"));
}    
   });
   $("ul .menu a").on("click", function() {
       var url = this.href;
       var param = url.split("=")[1];   
       ajaxReq(param, this);
   });
   function ajaxReq(id, e) {      
       if(activeId != id) {
$(".content-left").find("a[href='#ajax?menuId="+ activeId +"']").removeClass("active");
$(e).addClass("active");
var areaName = areaJson[id];
      $(".content-right").empty();
        $(".content-right").html("欢迎来到" + areaName + "！");
activeId = id;
       }
       
   }
    window.addEventListener("popstate", function(e) {
    var url = window.location.href;
    var id = url.split("=")[1];
    if(url.split("=").length > 1) {
    ajaxReq(id, $("ul .menu a[href='#ajax?menuId="+ id +"']"));
    }else {
    ajaxReq(1, $("ul .menu a[href='#ajax?menuId=1']"));
    }   
   });
   
    </script>
</body>


</html>

示例截图：