Is there a way to emphasize my navigation using a call-to-action (CTA)?

My CTA is set up like this:

<div class="heading__link">
   <a class="heading__cta" href="#about">View my work</a>        
</div>

Additionally, my navigation bar is structured like this:

<nav id="nav-bar" class="nav-bar">
  <ul class="nav">
    <li class="nav__item"><a class="nav__link" href="#home">Home</a></li>
    <li class="nav__item"><a class="nav__link" href="#about">About</a></li>
    <li class="nav__item"><a class="nav__link" href="#projects">Projects</a></li>
    <li class="nav__item"><a class="nav__link" href="#contact">Contact</a></li>
</ul>
</nav>

I am currently trying to implement a feature that highlights the 'about' link in the navigation bar when I click on the CTA. However, I am having difficulty achieving this with JavaScript. My goal is for the 'about' link to remain highlighted until another link is clicked.

I believe adding an .active class could potentially solve this issue, but I am struggling to make it work specifically with a CTA.

javascripthtmlcss

Answer №1

function addHighlight(){
    let aboutLink = document.getElementById('about');
    aboutLink.classList.toggle('highlighted');
}
.highlighted{
    background-color: yellow;
}
<div class="header__link">
   <a class="header__cta" onClick="addHighlight()" href="#about">Check out my portfolio</a>        
</div>

<nav id="menu-bar" class="menu-bar">
  <ul class="nav">
    <li class="nav__item"><a class="nav__link" href="#home">Home</a></li>
    <li class="nav__item"><a id='about' class="nav__link" href="#about">About</a></li>
    <li class="nav__item"><a class="nav__link" href="#work">Work</a></li>
    <li class="nav__item"><a class="nav__link" href="#contact">Contact</a></li>
</ul>

That's one way to do it!

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

Ways to align items in the middle of a list

I'm having trouble figuring this out. How can I properly center list items within the ul? body {margin: 0} ul { width: 1000px; margin: 0 auto; padding: 0; list-style-type: none; margin-top: 30px; overflow: hidden; background-color: # ...

htmlcsshtml-listslistitem

Is it possible to activate the onChange function even when the input value is automated?

I am using a Form.Input element <Form.Input fluid required label="First name" placeholder="Jose" name="firstName" value={ _.isNil(selectedProfile) ? firstName : selectedProfile.first_name } onChange={this.onCustomerFieldUpdate} /> In my code, I am ...

javascriptreactjs

Using Jquery to increase input values in multiples on keyup event

Is there a way to ensure that an input element only accepts numbers in increments of 50? While we know we can use the step="50" attribute, is it possible to achieve this using the keyup event instead? I came across this code that restricts users from inp ...

javascriptjquery

Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif The main feature should be a large video placeholder at the top, followed by several thu ...

javascriptjqueryhtmlcss

Utilizing Python and Selenium with PhantomJS to convert multiple files into PDFs

I have been working on implementing the code provided in Python + Selenium + PhantomJS render to PDF Instead of saving a single web page as a PDF file, I am trying to iterate through a list of URLs and save each one with a specific name taken from ano ...

htmlpython-2.7pdfselenium-webdriverphantomjs

Vuejs is throwing an uncaught promise error due to a SyntaxError because it encountered an unexpected "<" token at the beginning of a JSON object

I am currently attempting to generate a treemap visualization utilizing data sourced from a .json file. My approach involves employing d3 and Vue to assist in the implementation process. However, upon attempting to import my data via the d3.json() method ...

javascriptjsonvue.jsd3.jstreemap

The information retrieved from an API fails to populate the table on the NextJS platform

I am facing an issue while trying to populate a table using an API call in NextJS. I have used the getStaticProps function to retrieve the data and pass it to the component. However, when I attempted to use the map() function to iterate over the data objec ...

javascriptreactjsapinext.js

Exploring the Behavior of Row Inside Card in Bootstrap 4 Alpha 6

In my usage of bootstrap 4 alpha 6, I encountered an unexpected issue while incorporating a grid within the body of a card without the card-block class. <div class="container"> <h5> The fundamental component of a card is the .card-bloc ...

cssbootstrap-4twitter-bootstrap-4

What is the best way to create a responsive layout using bootstrap or HTML and CSS without relying on JavaScript?

Explaining the issue in words is a bit challenging for me as English is not my first language. Please take a look at the image I have linked below for a better understanding of my problem. https://i.sstatic.net/68zan.jpg Currently, I am utilizing bootstr ...

htmlcssbootstrap-4

Exploring ways to fetch recursive categories from MongoDB using Node.js or JavaScript

Here is a list of categories: https://i.sstatic.net/0PVhE.png Expected output: [ { "_id": "5f04bb4afce61722a8e3ca0f", "parentCategoryCode": null, "title": "Novelty", & ...

javascriptnode.jsmongodb

The method of stamping masonry is not encircling

I recently discovered a new method in Masonry 3 called "stamp" that allows you to fix an element in place. However, I am finding that it is not working as expected. Check out this example from David DeSandro: http://codepen.io/desandro/pen/wKpjs Initial ...

jqueryhtmlcssjquery-masonry

angular2 variable turns null during post request, synchronization breakdown

Currently, I am in the process of developing an ecommerce web application using Angular2 and have encountered a issue with saving ordered information in session. addToCart(productId:string,noOfItems:number):void{ let itemCounts; let selectedItems= ...

javascriptangular

Ways to speed up the disappearance of error messages

There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...

javascripthtmlcssangularjserror-handling

The beauty of Aurelia's scoped CSS

Embarking on my Aurelia journey, I find myself navigating through the vast world of web development with tools like nodejs, gulp, and more. The Aurelia CLI has made it convenient for me to set up a visually appealing Aurelia project in Visual Studio Code ...

cssgulpaurelia

Updating the current view in Rails with newly fetched data

NOTE: To make it easier, skip to the EDIT part below. Thank you! I am currently working on adding a simple feature to my app. The feature involves a view with a chart that depends on two query parameters: :from and :to. I am using "Chartkick" and below a ...

javascriptruby-on-railsrubyajaxruby-on-rails-5

Utilize Express and Mongodb to interact with API and database queries

Looking for assistance with my project on creating a gaming server list. Users should be able to add their server by entering a title, IP, port, and some information about it. However, on the homepage, I also want to display the number of players and whet ...

javascriptjsonnode.jsmongodbapi

Troubleshooting: Images not displaying on webpage due to Ajax, JQuery, and JavaScript integration

I'm currently working on building a dynamic photo gallery using Ajax and JQuery in Javascript. I have set up a directory named "images" in Visual Studio Code and it contains my selection of 5 images. However, when I click the "next" and "previous" but ...

javascriptjqueryajaximage-gallery

Unable to Load CSS Template in Django Version 1.8

My CSS file is located at /ecomstore/static/css.css I have added the CSS file to the base.html file by linking it within the head tags: <link rel="Stylesheet" type="text/css" href="/static/css.css" /> In my urls.py file: from django.conf.urls imp ...

pythonhtmlcssdjangodjango-1.8

Morris.js tutorial: Enhancing bar charts with data labels

I have this: https://i.sstatic.net/GXjur.png But I want this instead: https://i.sstatic.net/spcS2.png Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

javascriptjqueryhtmlcssmorris.js

StopPropagation() method in Ng-class not functioning properly in Angular for parent element

I am facing an issue with 2 nested ng-repeats. The parent one is supposed to add a class based on ng-click, but even when I click the child, it still triggers when I don't want it to. <div class="add-filter-tags" data-filter="{{f1}}" ng-class="{&a ...

javascriptangularjs