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

li单击事件上的

e.preventDefault();不会禁用锚元素的触发。在下面添加代码以将其禁用。

    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');

  });

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

2 个答案: