Disable A HTML Link/anchor Tag - Code With Hugo

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript.

Table of Contents

• Disable HTML anchor with CSS pointer-events: none
• Disable HTML anchor with inline JavaScript href="javascript:void(0)"

Disable HTML anchor with CSS pointer-events: none

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style.

pointer-events: none will disable all click events on the anchor element.

For example:

<a href="https://google.com" style="pointer-events: none">Google.com</a>

The pointer-events can be set using CSS properties and selectors:

<style> .disabled-link { pointer-events: none; } </style> <a href="https://google.com" class="disabled-link">Google.com</a>

This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.

<style> /* not recommended */ a { pointer-events: none; } </style> <a href="https://google.com">Google.com</a>

We’ve now seen how to disable an HTML anchor/link element (a tag) using pointer-events: none, which can be done without touch the existing href attribute using styles.

Next we’ll see how to disable an HTML anchor/link element using inline JavaScript inside of the href attribute.

Disable HTML anchor with inline JavaScript href="javascript:void(0)"

The following link is disabled using inline JavaScript in the href attribute.

<a href="javascript:void(0)">Google.com</a>

This can be useful when combined with a JavaScript library like Alpine.js:

<div x-data="{ disabled: false }"> <a :href="disabled ? 'javascript:void(0)': 'https://google.com'">Google.com</a> <button @click="disabled = !disabled">toggle disabled</button> </div>

The examples in this post can be found on CodePen.

Photo by Jonathon Young on Unsplash

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.

Find out more

or

Join 1000s of developers learning about Enterprise-grade Node.js & JavaScript

Improve my JS

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.

Find out more close

• A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring Cloudflare
• Simple, but not too simple: how using Zeit’s `micro` improves your Node applications
• When to use Jest snapshot tests: comprehensive use-cases and examples 📸
• Bring Redux to your queue logic: an Express setup with ES6 and bull queue

More and more colleges offer their students the opportunity to try their hand in coding. With technologies continuing making massive inroads people’s our everyday lives, such professions as a computer programmer, web developer, software engineer, mobile app developer, and others ranks among the best paying and on-demand. No wonder, so many students, even those who initially chose completely different majors, strive to become conversant with popular programming languages. Being able to write code and program is not only promising, it’s prestigious. But slews of your learners find themselves plagued by some concerns and doubts we’ll try to dispel in today’s article. What’s more, we’ll help you answer the hardest questions most beginners ask themselves when tackling programming and choose the programming language you’ll be most comfortable with. ...

The “Hello World” of JavaScript frameworks and libraries seems to have become the todo app. In the case of Alpine.js a todo app is almost too large to showcase Alpine’s core benefits and use case. Another issue with a lot of JavaScript examples is that they forego accessibility. Therefore we won’t be building a todo app but an accessible navigation menu. Our menu is as follows (read on for a breakdown of how it’s built). ...

Code with Hugo—Disable a HTML <a> link/anchor tagShare this