Attempting to swap out the text of a menu item with an icon when it is selected

Here is my very first question on this platform.

I have 5 menu items and each has an associated icon. The code snippet for one of the menu items looks like this:

<li class="nav-item">
<a class="nav-link currentactive" href=" index.html#getdemo">Get Demo</a>
<a class="nav-link2" href="index.html#getdemo"><img src="images/demo.png"></a>
</li>

This code snippet corresponds to one section on a one-page website with different menu items linking to various sections using #id.

My goal here is to display text when the menu item is selected, and hide the corresponding icon. Conversely, when the menu item is inactive, I want to hide the text and show the icon.

Currently, the menu displays like this: https://i.sstatic.net/TSwAH.jpg

However, I would like it to look more like this: https://i.sstatic.net/OCazL.jpg

If you are curious about how I determine the active section on the page, I have already implemented a solution using JS from this source.

I believe the key to achieving what I want lies in writing a JavaScript script to toggle between showing nav-link2 and hiding nav-link1 when the menu item is active.

However, I am currently struggling with implementing this solution and feeling quite lost. Any guidance would be greatly appreciated.

Answer №1

Make sure to add the active class to the li element and then use the following styles:

<li class="nav-item currentactive">
<a class="nav-link" href=" index.html#getdemo">Get Demo</a>
<a class="nav-link2" href="index.html#getdemo"><img src="images/demo.png"></a>
</li>

Css

.currentactive .nav-link, .nav-link2 {
    display: none;
}

.curentactive .nav-link2, .nav-link  {
    display: inline-block;
}

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

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

The setState function in React Native seems to be having trouble updating

I've been attempting to access state from a component, but for some reason, I'm not seeing any changes when I use setState(). Here is the current state of my component: class MyTestComponent extends React.Component { constructor(props){ ...

Is it possible to have SVG animation triggered by scrolling?

Here's a small svg code snippet: <svg xmlns="http://www.w3.org/2000/svg" width="164.969" height="195"> <path d="M164.979 28.97a3.675 3.675 0 0 1-6.19 2.66 90.127 90.127 0 1 0-.99 132.64 3.685 3.685 0 0 1 4.95 5.46 97.5 97.5 0 1 1 1 ...

Can .map() be utilized to transform an array of objects into a single object?

Presented here is a subset of data extracted from a larger dataset in a project: const data = [ { scenario: '328', buckets: 2 }, { scenario: '746', buckets: 1 }, { scenario: '465&apos ...

Creating a new Express JS application

I've encountered an issue with my express application. When I run the server and navigate to localhost in my browser, the index page loads but without the image that should be displayed. The browser console shows a 404 error for the image URL. GET ht ...

Are you interested in implementing the switcher function in a React JS class component?

I am having trouble implementing the switcher method in my react app, which is built using class components. Can you provide guidance on how to utilize the useThemeSwitcher() function in class components? How can I integrate this function into my web app ...

"Enhancing JqGrid functionality with inline editing and custom formatters

I'm currently working with a column model that looks like this: { name: 'CostShare', index: 'CostShare', width: 50, formatter: 'number', formatoptions: { decimalPlaces: 2, suffix: "%" }, resizeable: true, align: 'ce ...

Issue with my "message.reply" function malfunctioning in Discord.JS

I'm currently learning how to use discord.Js and I am facing an issue with my message.reply function not working as expected. I have set up an event for the bot to listen to messages, and when a message containing "hello" is sent, it should reply with ...

What could be causing the script to not function properly on 3D text in Unity5?

Here is the code snippet I have been working on: function OnMouseEnter() { GetComponent(Renderer).material.color = Color.grey; } function OnMouseExit() { GetComponent(Renderer).material.color = Color.white; } I've noticed that when I apply t ...

An Array of objects is considered NULL if it does not contain any values before being iterated through

Working with Files in TypeScript (Angular 8) has led me to Encode the files in Base64 using the code below: private async convertToBase64(evidences: Array<EvidenceToDisplay>): Promise<Array<EvidenceToDownload>> { const results: Arr ...

What is the best way to extract the value from a JSON URL?

Using AngularJS, I am looking to dynamically retrieve the price value from a URL's JSON data. Is this feasible? Here is the URL JSON: link Below is my controller: angular.module("myApp",['zingchart-angularjs']).controller('MainContro ...

Ways to trigger the onclick event from different controls

I have a videojs player and a button on my html page. The videojs player supports the functionality to pause/play the video when clicked. I want to trigger this event by clicking on my button. How can I achieve this? Here is the code that I tried, but it ...

What is the process for deploying a next.js application with a custom express backend to a VPS or Heroku platform?

Does anyone have advice on deploying a next.js application with a custom express backend to either a VPS or Heroku? ...

Incorporate content from HTML into various sections

Is there a way to dynamically extract the h4 headers and the first sentence from each section of this HTML, and then add them to a new div? function summarize() { let headings = document.getElementsByTagName("h4"); // Get all H4 elements let newsText = do ...

Once the grunt build process is complete, execute "heroku run fileName" to launch the

In order to gain a deeper understanding of Heroku scheduling, I decided to delve into an informative post on the topic and followed the instructions provided to build the app. The highlight of the post was when I successfully executed heroku run numCheck a ...

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

My app includes several routerLinks that I have styled using [routerLinkActive]="['active']". Everything works perfectly when I click on one of the routerLinks to navigate. However, when I try to navigate using: this._router.navigate( [ thisUrl ...

Can someone guide me on the process of adding a personalized emoji to my discord bot?

After creating my own discord bot, I'm ready to take the next step and add custom emojis. While tutorials have helped me understand how to use client.cache to type an emoji, I'm unsure of how to upload them and obtain their ID for use in my bot. ...

Attempting to retrieve data from the Model in a JavaScript function post-page render using NodeJS and EJS

I'm new to NodeJS and I'm working on my first application. I am using Ejs to create the user interface and passing a model with data displayed in a table. I'm attempting to access this model's data in a JavaScript function to avoid ano ...

Displaying properties of a class in Typescript using a default getter: Simplified guide

Here is an interface and a class that I am working with: export interface ISample { propA: string; propB: string; } export class Sample { private props = {} as ISample; public get propA(): string { return this.props.propA; } public se ...

Incorporate React Components into a traditional HTML, CSS, and JavaScript project

Can I incorporate a React Native Component (https://www.npmjs.com/package/react-native-gifted-chat) into my vanilla JavaScript project? Is it feasible to embed a React Native component within a vanilla JavaScript project? If yes, then what is the process ...