对于a标签的onclick事件与href,之前一直没想过onclick事件与href能有什么关系,直到今天遇见了一个bug,怎么也找不到原因,最后才发现是因为onclick与href的原因。
bug:用A标签做了导航,
<a class="nav-li-select nav" href="#">首页</a>
<a nav" href="#">产品中心</a>
jquery写了界面跳转:
$(".nav").eq(3).click(function () {
$(".nav").removeClass("nav-li-select");
$(this).addClass("nav-li-select");
window.location.href = "personalCenter.html";
});
写完之后,界面怎么也无法跳转,我以为是window.location.href的问题,换成window.open()就可以跳转,查阅许多了window.location.href的资料,这过程中对window.location.href与 window.open()的理解也加深了,以前只是知道,window.open()跳转新界面是重新开一个窗口,window.location.href是在原有窗口进行跳转,查阅资料之后,window.location.href表示重定向到新界面,同时刷新这个新界面, window.open()表示重新打开新界面,不刷新。
改了这个window.location.href许久依然无法跳转,之后无意中发现了问题,原来是a标签的问题,a标签的onclick事件会先被执行,然后在是href的的跳转动作,就是onclick跳转之后,又被href给跳转回来了。
解决方法:
$(".nav").eq(3).click(function () {
$(".nav").removeClass("nav-li-select");
$(this).addClass("nav-li-select");
window.location.href = "personalCenter.html";
return false;
});
在我原来的代码中,加上了 return false;onclick事件返回false,href属性下的动作就不会在执行了。