我有以下
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) });