What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Imagine you have a clickable container that leads to another page when clicked. However, there are elements within this container that you want to disable so that clicking on them does not activate the link. How can this be achieved?

For instance, in this scenario, I aim to deactivate the red portion of the container. 

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<a href="#">
  <div class="container">
    <div class="block-1">Active</div>
    <div class="block-2">Disabled</div>
  </div>
</a>

htmlcss

Answer №1

When you place content within an <a> tag, it becomes clickable since the "click" event is triggered on the parent (<a> tag) rather than its contents.

To address this issue, ensure that one div functions as a link while the other does not.

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}
<div class="container">
   <a href="#" class="block-1">Active</a>
   <div class="block-2">Disabled</div>
</div>

Answer №2

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Link Disabling via CSS</title> 
    <style type="text/css"> 
        .not-active { 
            pointer-events: none; 
            cursor: default; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">UniqueCodingSpace</h1> 
        <h3>A Programming Hub for Innovators</h3> 
        <b>Disabled link:</b> Want to explore more?  
          <a href="www.uniquecodingspace.com"
             class="not-active">Click Here</a> 
        <br> 
        <br> 
        <b>Enabled link:</b> Access our coding platform  
          <a href= 
             "https://platform.uniquecodingspace.com/tryit.php"> 
            Click Here</a> 
    </center> 
</body> 
  
</html>

Answer №3

If you want to control whether a link is followed or not, one approach is to implement a click handler. You can use this post as a reference on how to achieve this by using e.preventDefault().

In the code snippet below, manipulation of the disabled variable can enable or disable the link.

It's worth noting that while this method may not be optimal for accessibility and screen readers, adding attributes such as aria-disabled could potentially improve the user experience in this regard.

var link = document.querySelector('a');
var disabled = true;
link.addEventListener('click', (e) => {
  if (disabled) {
    console.log('disabled');
    e.preventDefault();
  }
});
<a href="https://google.com">My link</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to toggle elements using CSS slide animations?

Is there a way to make a div slide in and out from the left to right when the user clicks on "clickthis"? Here is an example of CSS code: .container{width:100px; position:absolute; left:-70px;} .container .open{left:0px;} .button{display:block; top:0px; ...

jquerycssanimationtoggle

The width of a div element seems to mimic the width of the entire page inexplic

There is a page containing various div elements. HTML: <div class="utilitiesHeader"> <div id="utilitiesLogo"></div> <div id="utilitiesFIO">Name of user</div> </div> <div class="utilitiesContent"> <d ...

htmlcss

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

javascriptcssanimationthree.js

Tips for enabling a flexbox item to extend beyond its container

While attempting to utilize flexbox for creating a navbar with the logo in the center, I encountered an issue where the logo wasn't able to overflow from above and below the navbar. I experimented with squeezing in and positioning the element, but it ...

htmlcsssassvuetify.js

Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

I am attempting to position the div with id 4 so that it appears after the divs with ids 2 and 3, which are placed next to each other. However, when I try to do this, I notice that the div with id 4 seems to start from the top itself. Even though the con ...

htmlcss

Guide on aligning a series of divs in a single row within a parent div

Within the confines of a 400px wide div called "container", there are six left-floated "box" divs, each 100px wide. The combined width of the "box" divs exceeds 400px, resulting in the divs wrapping onto two lines, with 4 on the first and 2 on the second ...

css

Trouble with Bootstrap popover displaying content

I've been working on implementing the bootstrap popover feature on a website and have had some success. I managed to get the popover to appear when the link is clicked, but unfortunately, I'm not seeing any content in the box other than the title ...

javascriptjqueryhtmltwitter-bootstrappopover

The Javascript function I created references a variable that seems to be undefined in the code

Recently, I discovered a function that is triggered with an onclick event using "openNav()" from an HTML element. Below is the code snippet for this function: function openNav() { document.getElementById("nav-drawer").classList.add("nav-drawer-open"); ...

javascripthtmlvariables

Styling the right button of the split button in jQuery Mobile version 1.4.0 using CSS

I was attempting to create a listview with list items that have a button on the right side, much like a jQuery Mobile split button listview. However, I only want the right button to be clickable. The left part of each item should contain a label along with ...

jquerycssjquery-mobilecustomization

What is the best way to determine the variable height of a div in Angular 7?

I'm currently trying to use console.log in order to determine the height of a div based on the size of a table inside it. This information is crucial for me to be able to ascertain whether or not a scrollbar will be present, especially within a dialog ...

javascripthtmlangularviewchild

Guide to updating Django model-based form records with choices option using an HTML form

I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...

htmlpython-3.xdjangodjango-formsdjango-templates

Is it normal not to see </head> and <body> tags in the page source code?

Looking at the source code of the page, you'll find something like this: <link rel="stylesheet" href="http://..."> <!-- analytics --> <script> ... Make sure the closing </head> tag and the opening <body> tag are positio ...

html

Dynamic HTML Generation using ASP.NET

Below is the code snippet that needs to be optimized: <asp:TemplateField HeaderText="Item Data"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "ItemData1") %> <br />&nbsp;&nbsp; <%# D ...

c#asp.nethtmldata-bindingitemtemplate

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

Let's imagine I start with this: <title>Banana</title> and also have some navigation set up like this: <ul id="navigation"> <li> <a href=#">Banana</a> </li> </ul> Upon loading the sit ...

javascriptjqueryhtmlcss

Set the style to be displayed as a block element

I am working on a Rails application that contains some <li> elements with the CSS property display: none;. I want these elements to only appear on the page when they are being dragged. However, there are some elements that do not have the display: no ...

javascriptjqueryhtmlcssruby-on-rails

Repetitive outcomes are observed when iterating through elements with Selenium in Python

I'm currently facing a puzzling issue that has me stumped. My HTML contains a ul list with multiple li items, each of which includes elements I need to extract using Selenium in Python. The structure of the website is as follows: <ul id="results"& ...

pythonhtmlselenium

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

javascriptphpjqueryhtmlcss

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

javascriptjqueryhtml

Attempting to iterate over a JSON object and display its contents using HTML

I have been attempting to iterate through this JSON data and display it in an accordion format similar to the one shown here: but unfortunately, my implementation is not functioning correctly. Here is what I currently have: HTML: <div class="a ...

javascriptjqueryhtmljson

Can you modify a single attribute for multiple child elements under a parent tag in Visual Studio Code simultaneously?

Imagine a scenario where you are faced with 30-40 options and need to update the name attribute from blank to something more appropriate. Is there a method in visual studio code that allows you to do this in one go? It would be a fantastic feature to have. ...

htmlvisual-studio-code