I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable.
Here is an example of how they currently look:
<a href="parent">Parent Item</a>
Is there a way to select the <a> tags with the class .parent specifically and make them non-clickable?
If you're looking for a Pure CSS solution (Since this question is tagged as CSS) you can utilize the property pointer-events: none;
a[href="parent"] {
cursor: default;
pointer-events: none;
}
Regarding browser support,
Credits to Mozilla Developer Network
Here is a commonly used method:
$(function () {
$('a.parent').on("click", function (e) {
e.preventDefault();
});
});
For those looking to steer clear of the jQuery library, accomplishing the task without it is equally simple:
var offLimits = document.querySelector('.container');
offLimits.addEventListener('click', function(e) {e.preventDefault();}, false);
If you want a purely CSS solution, one option is to place an absolute positioned "cover" on top of the link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.parent {position: relative; z-index: -1;}
.parent:after {content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<a href="http://google.com" class="parent">Disabled Link</a>
<a href="http://google.com">Normal Link</a>
</body>
</html>
Instead of attaching a listener to each .parent element, consider adding a single listener to the body instead. This approach is compatible with all current browsers and does not require any external libraries:
function preventClickOnParentClass(event) {
var element = event.target || event.srcElement;
if (/(^|\s)parent(\s|$)/.test(element.className)) {
event.preventDefault();
return false;
}
}
Then, modify your HTML like this:
<body onclick="preventClickOnParentClass(event);" …>
You can also make the class name dynamic by passing it as a parameter to the function and constructing the regular expression accordingly.
Managing multiple 'pages' of content within a multi-step process can be challenging, especially when trying to incorporate VueJS's transition feature for a carousel-like slide in/out effect. The contents being transitioned are stored in sepa ...
As a beginner, I've created a document with a 3x3 checkerboard using HTML and CSS. However, I'm facing an issue where the heading element is not displaying on a separate line as expected. I believe the problem lies in the CSS styling, specifical ...
I'm facing the challenge of passing an array from one page to another. When accessing the next page on form submission using this.$router.push('path'), is there a way for me to also transfer the array so that it can be accessed on the new p ...
Greetings all, I am currently attempting to parse a website using Node.js (utilizing request and cheerio). The issue I am encountering is that I am trying to extract the href from the site, but I can only find it within the site's window. Unfortunatel ...
All the information needed is in this question. For example, if I decide to utilize Twitter Bootstrap, would it be possible for me to create classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or is SASS inheritance restricte ...
I've implemented a basic tree panel checkbox example using Ext.js as shown below: Ext.onReady(function(){ var tree = new Ext.tree.TreePanel({ renderTo:'tree-div', title: 'My Task List', height: 300, ...
Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...
I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...
My database consists of collections for Teachers and Classes. In order to fully understand my issue, it's important to grasp the structure of my database: const TeacherSchema = new Schema( { name: { type: String, required: true } ...
Update: I just figured out the solution to my own problem. If anyone can assist in adding pagination to the response, I'd be happy to treat you to a pint of your choice! :) There's some code that needs tidying up here, but I'll get to it lat ...
Before pointing out any similar questions, please note that the answer from those sources does not apply to my specific code. I am trying to achieve this through a function as outlined here But I am struggling to figure out how to add captions only if th ...
I'm struggling to create a homepage featuring a slider that pulls images dynamically from a subfolder within the Wordpress uploads directory. Here's my code: <div id="" class="carousel slide" data-ride="carousel"> <!-- Wrapper for sl ...
I encountered an issue in Edge, but everything works fine in Chrome. I can't figure out what's causing the problem... <div class="container-fluid project_img" style="background: url({{_project.images.web}}) no-repeat center center;"> ...
Is there a way to update the dropdown values based on new data after applying the first filter? For example, only displaying $0 in the second dropdown menu? Essentially, I want to filter the values in a table and then have the dropdown options reflect the ...
Just starting out with AngularJS and I need to achieve the following task. I have a text that says "bob" and two buttons, one for bold and one for italic. When the bold button is clicked, I want to make the text BOB bold and when the italic button is click ...
I am currently working on a basic data view with an HTML table. One question that I have is how to add the next set of data below the last row when clicking on the pagination link. ...
Dealing with a frustrating issue here. I created a template using Foundation's E-mail features and it looks perfect in Chrome's Device mode as well as in MailChimp. However, when testing it in Litmus and sending it to my own email, things start t ...
I am working with an array of objects fetched from an API (), which is linked to a variable that serves as the v-model for an input. Whenever the variable changes, so does the array through a function that triggers the API call on @keyup. The structure of ...
One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...
I'm seeking assistance in rendering data from an API to HTML using handlebars. I'm a bit puzzled on how to properly showcase the data on the webpage. Here's what I have so far: ROUTES FOLDER/FILE: const express = require('express&ap ...