location.hash 原生js页面跳转/路由
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢,下面说一下window.location.hash,概念性的东西大家看这篇文章,也比较全面,这里主要说下用法:当前在做的这个项目,页面跳转使用的是hash,基本原理非常简单,在主页面跳转按钮中分别加上一个属性,data,id等都可以,用来标识当前要跳转的页面,然...
·
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢,
下面说一下window.location.hash,概念性的东西大家看这篇文章,也比较全面,这里主要说下用法:
当前在做的这个项目,页面跳转使用的是hash,基本原理非常简单,在主页面跳转按钮中分别加上一个属性,data,id等都可以,用来标识当前要跳转的页面,然后在点击跳转时获取到data或id属性的值,保存到window.location.hash中,然后根据当前拿到
的data或id的值,即window.location.hash值动态判断要跳转的路径,还有一个很重要的方法,jquery的load()方法,载入远程 HTML 文件代码并插入至 DOM 中,获取到当前要跳转的hash路径,然后执行load方法,载入要跳转的页面即可:
$(".head_mleft ul li").click(function(){ // 导航按钮点击事件
var index=$(this).index();
$(this).addClass("head_active").siblings("li").removeClass("head_active");
$(this).parents(".head_menu").find(".head_mright ul li").removeClass("head_active");
$(".head_menusleve ul").eq(index).toggle();
$(".head_menusleve ul").eq(index).show().siblings("ul").hide();
var sId = $(this).data("href"); // 获取当前点击按钮的data的href属性
window.location.hash =sId; // 保存到hash中
self.loadInner(sId); // 页面跳转的方法
var Iindex=$(".head_menusleve ul").eq(index).find("li").length;
$(".heaad_secord").css({height:Iindex*70+"%",left:(8+index*7.56+"%")});
})
loadInner:function(sId){
var sId = window.location.hash; // 获取到hash值
var path, index;
switch(sId) { // 获取与hash值匹配的页面路径
case "#home":
path = "home.html";
break;
case "#vehicleTrends":
path = "vehicleTrends.html";
break;
......
}
$(".containner").load(path); // 载入页面
},
还有一个比较重要的方法: data(),可以用来在元素上存放数据,返回的是jquery对象。
data(),load()方法加window.location.hash的综合运用即可实现原生js页面跳转。
更多推荐
已为社区贡献18条内容
所有评论(0)