Question

I have an <a> tag on my website, a script which shows a loader when you click on a link (any links).

Here is the code :

window.onload = function(){
  var loading = document.getElementById("loading");
  var elements = document.querySelectorAll("a");

  function showLoading(){
      loading.style.display = "block";
  }

  for(var i = 0; i < elements.length; i++){
      elements[i].addEventListener("click",showLoading);
  }
}

Problem: on non-real links <a href="">, like "tabs" or "dropdown" on Bootstrap3, the load is still running. How can I avoid this ? (using a general .class or like this ?)

Answer 1

根据Bootstrap v4 documentation，您现在可以使用按钮代替链接，如下所示：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

或者，您可以指定let elements = document.querySelectorAll("a:not(.class-all-inactive-links-share"))。

Answer 2

如何使用此jquery禁用那些锚标签？

$('#anchor_tag').attr("disabled", true);

如何在链接（<a>) on Bootsrap3 non-real-links (</a> <a href="#...">)?

2 个答案: