为什么每次我单击选项卡时页面都会向上滚动一点?

Question

下面是我的jQuery，为什么每次我点击我的标签时页面都会向上滚动一点？

我认为jQuery有问题...

<script>
//jQuery for the loan calculator tab
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>

我尝试添加此代码片段以检查 e.preventDefault(( 是否有效

e.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());

但警报框不显示。

Answer 1

e.preventDefault();在 li 单击事件上不会禁用锚元素的触发。 在下面添加代码以禁用它。

jQuery('.tabs .tab-links li a').on('click', function(e) {  
e.preventDefault();
});

Answer 2

这是一个具有数据属性的简单解决方案。

看到这个：https://codepen.io/nisaifudeen/pen/MPJppr

Jquery

$('.wrapper ul li').find(' a').click(function(e){
e.preventDefault();
var dataShow = $(this).parent().find('.heading-c').data('show');
$('.heading-c[data-show=' + dataShow  + ']').toggleClass('active');
});