Different Option for Anchor Tag When Javascript is Disabled

One interesting feature is the ability to set a different "href" attribute for an anchor tag when JavaScript is disabled.

For instance:

When JavaScript is enabled:

<a href="#news">News</a>

If JavaScript is not enabled:

<a href="news.html">News</a>

Answer №1

To make a website interactive with JavaScript, you can assign the attribute in a data-xxxx and then use JavaScript to update the href with the value from data-xxxx.

For instance, in your HTML code, you may have:

<a href="news.html" data-js-href="#news">News</a>

Then, in your JavaScript code, you can implement:

var links = document.querySelectorAll('a[data-js-href]');
for (var i=0; i<links.length; ++i) {
    links[i].setAttribute('href', links[i].getAttribute('data-js-href'));
}

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

Unable to retrieve state values or any methods that were declared from renderRow in React-Native

I am facing an issue with my listview. Whenever a user clicks on an item, I want something to happen using onPress (touchable highlight). I attempted to define functions and then call them in onPress, but it didn't work as expected. First, I defined ...

Converting XML to JSON in a Node.js application

I recently read an article on that explained the conversion process clearly, but unfortunately it's not working for me. Let me provide you with the code snippet: function parseXml(xml) { var dom = null; if (window.DOMParser) { try ...

Retrieving multiple raw markdown files from GitHub using React JS

Currently, I am facing a challenge in fetching data from multiple raw .md files stored in different folders within a GitHub repository. Although I have successfully retrieved data from one file, my goal is to access all of them. The situation involves a G ...

Leveraging the JavaScript NPM module through import functionality

Currently, I am utilizing the kahoot-api NPM module (GitHub, NPM) that requires JavaScript import. (edit: this is a Node.js package. At the time of writing this, I was unaware of the distinction between JS and Node.js, hence the creation of this question). ...

"Unleashing the power of infinite Ajax requests upon a drop change event in Knock

I am working with Knockout MVC on my current project and encountering an issue. Whenever I try to pass the viewModel when the Drop Down changes, the method call gets invoked multiple times and the alert message "ok" keeps popping up continuously. Can som ...

Having trouble with the functionality of Bootstrap's nav-tabs 'show' feature?

I'm having some issues with adding a search box to my glossary. The glossary is created using nested unordered lists (ul) within another ul that has classes of "nav-tabs" and "bootstrap". In the JavaScript code, I am using the following snippet: $j(& ...

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

Utilizing Controller-Sent Filters in Directive Link Functions: A Guide

I am struggling with implementing a filter inside a directive. I have a basic filter that works fine within an ng-repeat directive, but I'm unsure of how to apply it within a directive's link function. Below is the code for my directive where I a ...

"Utilizing Node.js and Express to return JSONP data based on

For some reason, my Express application is giving me a strange result when using res.jsonp. It looks like this: /**/ typeof jsonp1406719695757 === 'function' && jsonp1406719695757({"published":true,"can_add_to_cart":true,"updated_at":"20 ...

"Each time I use jQuery.getJSON with JSONP, the same data is being returned regardless of the

Using jQuery.getJSON(), I am hitting the same web service three times consecutively with different parameters to draw charts with the received data. The issue lies in the fact that, while obtaining the data in my callback function, it is not consistently a ...

Creating a post request in Express.JS with an empty object

Currently, I am working with Express version 4.18.2. I have created routing and controller files along with an HTML form that uses the POST method. However, when I submit the form, I attempt to display the req.body object sent in the request through the co ...

Ways to activate an event based on the dimensions (width/height) of

Exploring ways to implement an if statement based on specific width/height values using this code example. Check out the code snippet here My approach: <p id="confirmation">Try again!</p> <script> if (new dynamicSize.width() < ...

karma is failing to run the test scenario

I am just starting out with karma and I'm having trouble running test cases. Below is my setup: karma.config.js module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) base ...

Tips on utilizing imacros for extracting image URLs

I am currently experimenting with the use of imacross for web scraping, but I have encountered a roadblock when it comes to extracting image URLs from markdown code like the one provided below. <div class="dpimages-icons-box"> <a href="http: ...

What is the best method for transferring state between a page and a component, and then back to the page

Is there a way to manage state without using Redux in my home.js page (using hooks, not classes), so that I can set/use a state, pass it to my component MyComponent.js, and update the state when a div is clicked inside this component (reflecting the change ...

motion graphic border not joining at the corner

Yesterday, my code was functioning perfectly. However, after making several revisions to include all animations and styles, I notice that the animated borders no longer connect at three corners. Can someone please assist in identifying what went wrong duri ...

IE6 is not displaying the tag styles correctly

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 ...

Incorporating Javascript into a Django template: best practices

Using Django templates, I am interested in embedding a Bokeh plot by using Json output. The Json output is already prepared for querying the database. The plot needs to be displayed in a div with a specific ID. According to the documentation, the followi ...

Have you attempted to configure a JSON file to facilitate language translations?

I need some guidance on structuring my data.json file efficiently. Currently, it is set up as shown in the example below. The goal is to have a drop-down menu where users can select a language and then display 50 different pages with specific content. I wa ...

Steps to design a code editor with autocomplete dropdown using Material UI technology

I am currently working on a unique use case for my app that involves implementing an editor-like textarea with Material UI Chip components (similar to tags in an autocomplete textbox) that generate expressions. The goal is to have an autocomplete dropdown ...