javascript - JQ 或 JS : Prevent "a" tag to change url #hash

Question

我试图阻止对具有类名“disable”的“a”标签的任何点击，我尝试了很多代码但没有一个能阻止“a”...

          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">today</i>
            <i class="icon f7-icons ios-only icon-ios-fill">today</i>
            <i class="icon material-icons md-only">today</i>
            <span class="tabbar-label">Home</span>
          </a>
          <a href="#view-games" class="tab-link disable">
            <i class="icon f7-icons">rocket_fill</i>
            <i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
            <span class="tabbar-label">Games</span>
          </a>
          <a href="#view-todo" class="tab-link disable">
            <i class="icon f7-icons">layers_alt_fill</i>
            <i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
            <span class="tabbar-label">Todo</span>
          </a>
          <a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
            <i class="icon f7-icons">download_fill</i>
            <i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
            <span class="tabbar-label">Download</span>
          </a>
          <a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
            <i class="icon f7-icons ios-only">search</i>
            <i class="icon f7-icons ios-only icon-ios-fill">search</i>
            <i class="icon material-icons md-only">search</i>
            <span class="tabbar-label">Search</span>
          </a>

这段代码给我一个警报，但它仍然更改#hash 以更改页面。

$('a#preventPage').on('click', function(event) {
  alert("Prevent");
  event.preventDefault();
});

Answer 1

这应该可以解决问题:

Array.from(document.querySelectorAll('a.disable')).forEach(c => {
  c.href = '';
  c.onclick = e => e.preventDefault();
});

<a href="#view-home" class="tab-link tab-link-active">
  <i class="icon f7-icons ios-only">today</i>
  <i class="icon f7-icons ios-only icon-ios-fill">today</i>
  <i class="icon material-icons md-only">today</i>
  <span class="tabbar-label">Home</span>
</a>
<a href="#view-games" id="preventPage" class="tab-link disable">
  <i class="icon f7-icons">rocket_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
  <span class="tabbar-label">Games</span>
</a>
<a href="#view-todo" class="tab-link disable">
  <i class="icon f7-icons">layers_alt_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
  <span class="tabbar-label">Todo</span>
</a>
<a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
  <i class="icon f7-icons">download_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
  <span class="tabbar-label">Download</span>
</a>
<a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
  <i class="icon f7-icons ios-only">search</i>
  <i class="icon f7-icons ios-only icon-ios-fill">search</i>
  <i class="icon material-icons md-only">search</i>
  <span class="tabbar-label">Search</span>
</a>