我利用页面 anchor 创建了一个选项卡式界面。这是一个问题,因为默认情况下,当在同一页面上单击链接到该 anchor 时,浏览器会导航到该 anchor :
showTab = function(tabName) {
tabName = tabName.replace(" ", "_"); //Fix space in tab name so that JS can use it.
$(".tab_selected").addClass("tab");
$("#p_" + document.querySelector(".tab_selected").id).hide();
$(".tab_selected").removeClass("tab_selected");
$("#" + tabName).addClass("tab_selected");
$("#p_" + tabName).show();
location.hash = tabName;
document.title = tabName.replace("_", " ") + " | AnED";
}
//if (location.hash.length < 1)
// showTab("Information");
body {
height:1200px;
}
.page_tabgroup {
display:table;
margin:0 auto;
width:auto;
margin-top:50px;
border-radius:4px;
background-color:#FFF;
border:solid 2px rgba(0, 120, 255, 0.8);
}
.page_tabgroup > a {
text-decoration:none;
border:none;
}
.page_tabgroup > .tab {
display:table-cell;
padding:10px 20px 10px 20px;
color:rgba(0, 120, 255, 0.8);
}
.page_tabgroup > .tab:hover, .primary_page > .page > .page_tabgroup > .tab_selected:hover {
background-color:rgba(0, 120, 255, 0.95);
border:inherit solid rgba(0, 120, 255, 0.6);
color:#FFF;
}
.page_tabgroup > .tab_selected {
display:table-cell;
padding:10px 20px 10px 20px;
color:#FFF;
background-color:rgba(0, 120, 255, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page_tabgroup">
<a href="javascript:showTab('Information')" class="tab tab_selected" id="Information">Information</a>
<a href="javascript:showTab('Course_Dates')" class="tab" id="Course_Dates">Course Dates</a>
</div>
在上面的例子中,浏览器自动向下滚动,使 anchor 元素位于顶部。这是令人恼火的行为,但并不奇怪。我尝试使用 preventDefault()
如 this answer 中所示至Avoid window jump to top when clicking #-links ,但是它没有任何效果。这可能是因为我没有使用点击处理程序(该函数是通过 javascript:showTab
链接直接执行的)。
使用点击处理程序会阻止 showTab
函数完全执行,并在其后面附加 showTab(e.id);
创建一个 Cannot read property 'replace'
错误:showTab
第 2 行出现未定义
$(".tab_selected").click(function(e) {
e.preventDefault();
});
$(".tab").click(function(e) {
e.preventDefault();
});
是否可以在点击处理程序外部阻止默认 anchor 行为?如果没有,我该如何解决这个问题?
最佳答案
你必须采取不引人注目的方式。
- 删除
href
和javascript:
。他们都老了。 - 使用正确的 jQuery 方式初始化事件监听器。
- 使用
history.pushState(stateObj, "page", "url");
以正确的方式更改哈希值.
$(function () {
$("a.tab").click(function(e) {
e.preventDefault();
var tabName = this.id;
tabName = tabName.replace(" ", "_"); //Fix space in tab name so that JS can use it.
$(".tab_selected").addClass("tab");
$("#p_" + document.querySelector(".tab_selected").id).hide();
$(".tab_selected").removeClass("tab_selected");
$("#" + tabName).addClass("tab_selected");
$("#p_" + tabName).show();
// location.hash = tabName;
document.title = tabName.replace("_", " ") + " | AnED";
return false;
});
});
body {
height:1200px;
}
.page_tabgroup {
display:table;
margin:0 auto;
width:auto;
margin-top:50px;
border-radius:4px;
background-color:#FFF;
border:solid 2px rgba(0, 120, 255, 0.8);
}
.page_tabgroup > a {
text-decoration:none;
border:none;
}
.page_tabgroup > .tab {
display:table-cell;
padding:10px 20px 10px 20px;
color:rgba(0, 120, 255, 0.8);
}
.page_tabgroup > .tab:hover, .primary_page > .page > .page_tabgroup > .tab_selected:hover {
background-color:rgba(0, 120, 255, 0.95);
border:inherit solid rgba(0, 120, 255, 0.6);
color:#FFF;
}
.page_tabgroup > .tab_selected {
display:table-cell;
padding:10px 20px 10px 20px;
color:#FFF;
background-color:rgba(0, 120, 255, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page_tabgroup">
<a href="#" class="tab tab_selected" id="Information">Information</a>
<a href="#" class="tab" id="Course_Dates">Course Dates</a>
<a href="#" class="tab" id="Home_Study">Home Study</a>
<a href="#" class="tab" id="In-House">In-House</a>
</div>
关于javascript - 是否可以在点击处理程序之外阻止默认浏览器 anchor 行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43610825/