Ajax实现点击导航栏只切换页面内容，导航栏不变

最新推荐文章于 2024-07-26 11:41:15 发布

smx6666668

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量2.8k

点赞数 3

分类专栏：前端HTML 文章标签： javascript ajax jquery html5 css

本文链接：https://blog.csdn.net/smx6666668/article/details/123808878

版权

前端HTML 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

	                  
 <ul class="Menu">               	                          
<li class="current"  data-id="111">导航1<span></span></li>
<li data-id="222">导航2<span></span></li> 
<li data-id="333">导航3<span></span></li> 
 </ul>               

<div id="content"></div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script> 
        
        $(function() {
            $(".Menu").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 "#111":
                        pathn = "111.html";
                        i = 0;
                        break;                      
                    case "#222":
                        pathn = "222.html";
                        i = 1;
                        break;
                    case "#333":
                        pathn = "333.html";
                        i = 2;
                        break;
                    default:
                        pathn = "111.html";
                        i = 0;
                        break;
                }
                $("#content").load(pathn); //加载相对应的内容
                $(".Menu li").eq(i).addClass("current").siblings().removeClass("current");//当前列表高亮
            }
            var sId = window.location.hash;
            loadInner(sId);
        });
        
    </script>

111.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  
</head>
<body>
111111111111111111111111
</body>
</html>

222.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  
</head>
<body>
22222222222222222222222222
</body>
</html>

333.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  
</head>
<body>
33333333333333333333333333333
</body>
</html>

smx6666668

关注

3
点赞
踩
58

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax实现点击导航栏只切换页面内容，导航栏不变

<ul class="Menu"> <li class="current" data-id="111">导航1<span></span></li><li data-id="222">导航2<span></span></li> <li data-id="333"&g...
复制链接

扫一扫