CODEWITHSUNDEEP
javascriptjquery
deLegend
deLegend

Reputation: 49

why every time I click my tabs the page is scrolling up a little?

below is my jQuery, why every time I click my tabs the page is scrolling up a little?

I think the jQuery has the problem...

<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>

I tried added this snippet to check whether the e.preventDefault() works

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

but the alert box doesn't show up.

Upvotes: 3

Views: 112

Answers (2)

saifudeen ni
saifudeen ni

Reputation: 145

this is a simple solution with data attribute.

see this: 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');

  });

Upvotes: 0

Ercan Peker
Ercan Peker

Reputation: 1662

e.preventDefault(); on li click event does not disable triggering of anchor element. add code below to disable it.

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

Upvotes: 1

Related Questions