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.
I developed a chat plugin for my website with a simple HTML structure: <div id="div_chat"> <ul id="ul_chat"> </ul> </div> <div id="div_inputchatline"> <input type="text" id="input_chatline" name="input_chatline" val ...
Incorporating the Highcharts JavaScript library, I am visualizing float values by passing them from PHP to the JS code. In the image below, you can observe that upon hovering over each point, the corresponding axes values are displayed along with the text ...
Encountered a problem with the radio buttons in Material UI. Currently, Material UI accepts value as a prop for the FormControlLabel component. When passing a string with an HTML entity like below, it gets parsed correctly. <FormControlLabel value="fem ...
I'm struggling to display data from an array and I could use some help. Here's a snippet from my service.js file: this.fetchData = function() { var myArray = $resource('url', {method: 'get', isArray: true}); myArray ...
Currently in my Ionic 3 project, I am utilizing a popover with a set height using the following code snippet: editOpty(rw){ let popover = this.editOptyPopup.create(EditOptyPopoverComponent, rw, { cssClass: 'edit-opty-popover'}); popover ...
I recently encountered a challenge while working with the csv-parser library in node for parsing large CSV files. The files I work with can range from 50,000 to 500,000 lines or even larger. My task involved performing computations on this data and then su ...
Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...
I am facing some challenges with single quotes while trying to append HTML with a JavaScript string. So far, I have managed to successfully append the element: $("<a class='action-button' id='pl65197buy' value='buy now'&g ...
I am working with a Telerik Kendo Grid that has a column listing medical diagnoses. The list is populated using a method in the controller. My task is to verify whether a newly added diagnosis is already present in the grid, and only allow adding diagnoses ...
Here's a question that may seem silly, but I'm looking to quickly apply CSS styles to a webpage by clicking on a bookmarklet. It will definitely save me time :) For example, this code does the trick: javascript:void( jQuery( ".fancybox-overlay- ...
My website has a section that shows two links next to each other. While it's displaying correctly on most browsers, it seems to have issues specifically in IE6. You can view the issue on this fiddle. Can anyone shed some light on why this is happenin ...
I am currently working on a form and you can view it at this link: http://jsfiddle.net/pPWr3/14/ While the form displays correctly in Chrome and Firefox, I am experiencing display and functionality issues when using Internet Explorer 9. The problems inclu ...
I face an issue with my code where I am unable to fetch the sectionID from tr. I want to retrieve the dynamic id of sectionID on each button click for deletion, but it always returns null. Below is the JQuery script: <script> $(function () { $(&apo ...
Recently, I created a code for an ajax search function that retrieves user information. In the Controller section: public JsonResult SearchPeopleByName1(string keyword) { System.Threading.Thread.Sleep(2000); ApplicationDbContext myDbConte ...
Encountering a problem with JQuery and JSF/Richfaces. The issue lies within an inputText component nested inside a form component. <h:form id="myForm"> <h:inputText id="myInputField" value="#{myBean.sampleName}" /> Here is the jQuery code ...
Hey there! I'm just diving into the world of Angular JS and I'm looking to filter any Twitter text that comes back containing a hashtag, and turn that word into a clickable link. For example: If the returned twitter text is "The quick brown #f ...
I have been experimenting with various methods to change the color of table rows based on specific values within a map function. Despite trying solutions like the UseRef hook and browsing through stack overflow, I have yet to achieve success. {dat ...
I am currently working on an extension that captures the page URL and saves it in a database once the user clicks the submit button. However, I have encountered a roadblock and believe there might be a missing piece in the extension setup that I cannot pi ...
I'm struggling to figure out how to display the data plot values with showValues: '1' in a zoomline chart using Fusion Charts. You can see and test it on this fiddle: http://jsfiddle.net/60oeahc1/4/ Is there a way to make this feature work ...
Apologies for the extensive amount of code, but it seems like there may be an issue with AppMobi's getCurrentLocation function in this scenario. The problem arises when tapping on list elements triggers an asynchronous getCurrentLocation call which up ...