Hide URL when a url hover

When designing a website, you may want to hide the URL that appears in the bottom-left corner of the browser when hovering over a link. This can enhance user experience and keep your design clean. Here’s a quick guide on how to achieve this.

Use the below code if you want to use jQuery

<style>
   a {
    cursor: pointer;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  $(function() {
    $("a").each(function(index, element) {
      var href = $(this).attr("href");
      $(this).attr("hiddenhref", href);
      $(this).removeAttr("href");
    });

    $("a").click(function() {
      url = $(this).attr("hiddenhref");
      // window.open(url);
      window.location.href = url;
    });
  });
</script>

Use the below code if you don’t want to use jQuery

<style>
  a {
    cursor: pointer;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Get all anchor elements
    const links = document.querySelectorAll("a");

    // Iterate through each anchor
    links.forEach(function (link) {
      // Store the href attribute value in a custom attribute
      const href = link.getAttribute("href");
      link.setAttribute("hiddenhref", href);
      link.removeAttribute("href");
    });

    // Add click event listeners to each anchor
    links.forEach(function (link) {
      link.addEventListener("click", function () {
        const url = link.getAttribute("hiddenhref");
        // Redirect to the stored URL
        // window.open(url);
        window.location.href = url;
      });
    });
  });
</script>