Search code examples
javascriptjquerypreventdefault

e.preventDefault() to prevent anchor jumping to the ID not working on anonymous function

I have the following jQuery/JS that triggers some stuffs when an element is clicked:

$(tabs).click(function(e) {
    tabs.removeClass('active');
    $(this).addClass('active');

    $(tabIDs).removeClass('js_tab_area_show');
    $($(this).attr('href')).addClass('js_tab_area_show');

    e.preventDefault();
    alert('worked');
});

tabs here has been initialised before the function and has selected the elements I want to target. All the things above are already working. However, I now want to disable the anchor element (i.e. tabs in this case) from scrolling to the element with the ID that is contained within the href properties of my anchors. I tried looking around and many suggested preventDefault() to prevent scrolling. However, it did not work for me. The only difference I mostly see is they have a named function dedicated for handling click events that is called from within the click function. Mine on the other hand did the above. The alert('worked') did fire indicating the code executed until the end. What did I do wrong here?

Solution

  • href Modification

    Instead of over complicating your JavaScript/jQuery or CSS do the following.

    <a href="#/">I DON't JUMP</a>

                       ☝ Just add a forward slash: /

    If you have a ton of links and no server-side utilities available to you see Demo 2. It has a simple JavaScript link collector.

    Demo 1

    h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

a {
  display: inline-block;
  height: 30px;
  font-size: 24px;
  width: 40%;
  margin: 400px 0;
}

a:first-of-type {
  color: red;
  text-align: right;
}

a:last-of-type {
  color: blue;
  text-align: left;
}
    <main>
  <h1>Scroll Down</h1>
  <h2>⇩</h2>
  <a href="#">Click me.<br>I JUMP.</a>
  <a href="#/">Click me.<br>I DO NOT JUMP.</a>
</main>

    Demo 2

    Array.from(document.querySelectorAll('a')).forEach(lnx => {
  if (lnx.getAttribute('href') === '#') lnx.setAttribute('href', "#/");
});
    h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

main {
  margin: 400px auto;
}

a:nth-of-type(odd) {
  background: #000;
  color: #fff;
}

a:nth-of-type(even) {
  color: #000;
}
    <h1>Scroll Down</h1>
<h2>⇩</h2>
<main>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
</main>