我有以下
HTML标记,这只是三个标签,点击后,在页面上的div中显示预加载的文本,
<a class="page" id="tab1">This is tab!</a>
<a class="page" id="tab2">This is tab 2!</a>
<a class="page" id="tab3">This is tab3!</a>
当单击其中一个选项卡时,此jQuery会隐藏或显示文本,
$(document).ready(function() {
$(".page").hide();
$("#tab1").show();
});
$(".page").click(function() {
var id = $(this).attr("href");
$(".page").hide();
$(id).show();
});
但是,如果在单击其中一个选项卡时存在页面溢出(即页面可滚动),则页面会自动滚动以将div置于视口中心.如何防止这种情况发生？
解决方法
要防止页面滚动单击(在锚点哈希之后),请使用：
Event.preventDefault()
$(".page").click(function( evt ) {
evt.preventDefault(); // prevents browser's default anchor behavior
// Other code here....
$(".page").hide(); // HIDE ALL .page
$("."+ this.id ).show(); // SHOW RELATED .(id)
});
