Presently, the links are not remaining active

I am working on creating an effect where my links change when hovered over and then stay changed when clicked until a new link is clicked. Initially, the links are slightly transparent but become fully opaque with a 5px bottom border when hovered over. Despite using the following CSS:

nav ul li a:active, nav ul li a.current {
opacity:1;
border-bottom:5px solid #37DD57;
position: relative;
top: 1px; 
}

However, when I click a link, it does not stay active as expected. Is there something I might be doing wrong or a specific script function that I need to include? You can view my current website draft here:

cssfunctionhyperlink

Answer №1

An active link remains active until another link is clicked or until the window object is removed. Due to the page reloading with a new URL, none of your links are considered "active" on page load. To address this issue, you will need to implement URL detection and style the links accordingly, either client-side or server-side.

Consider the following solution:

var _links    = ['news','about','gallery'], // etc..
    _pagename = null,
    i         = 0,
    max       = _links.length;

for(; i<max; i++) {
    _pagename = window.location.pathname.match(/[a-z]+(?=.html)/);
    if (_pagename == _links[i]) {
        document.getElementById(_pagename).childNodes[0].className = 'current';
    }
}

To see this in action, visit , paste the provided code into your console, and press enter. You should observe the Gallery tab getting highlighted.

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

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcss

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

If the value is less than 6, change the color of a cell in a different table to red

I am in the process of developing a bike reservation system that collects information from a form and stores it in a database (completed). The stored information is then displayed in a table (completed), with the feature pending to automatically delete dat ...

phphtmlcssmysql

image background not appearing in HTML, CSS, and JavaScript game

When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line: background-image: url(flappybird.png); I also ...

javascripthtmlcssbackground-image

Sizing elements vertically using CSS

Struggling with getting the content area on my web page sized and aligned correctly. I want it to utilize all the vertical visible screen space, leaving 80px at the top and 20px at the bottom. Sometimes, the page may extend further down, requiring scrollin ...

htmlcssvertical-alignment

From SCSS to Style.css: Transforming Sassy Casc

Recently, the lead developer who worked on this project has left the company and now I have been tasked with taking over the project. Any assistance or guidance in this transition would be greatly appreciated. I must admit, I am not well-versed in WordPre ...

htmlcsswordpressnpmsass

Issue with Image Quality in Woocommerce/Wordpress Products

I'm experiencing an issue with either Wordpress or Woocommerce. Yesterday, I updated Woocommerce while installing a new theme. Unfortunately, I'm facing a problem now where I can't seem to improve the image quality on the product page. Jus ...

phpmysqlcsswordpresswoocommerce

Conceal a table with jQuery

Is there a way to initially conceal a table on page load only to reveal it with a sliding animation when a specific link is clicked? I have attempted using the following code to hide the table: $('.table_div').hide(); I have enclosed the table ...

javascriptjqueryhtmlcss

There appears to be an issue with the LogOff function in the NavBar within the MVC5

I've encountered an issue while implementing a Bootwatch template with my MVC 5 project. Specifically, my NavBar Menu seems to be malfunctioning. 1.- My "LogOff" button isn't working as expected. When calling the script in my _LoginPartial, it d ...

htmlcssasp.net-mvcbootstrap-4navbar

div element failing to adjust size when zoomed

I've encountered an issue with a form located below the banner on a website's homepage. The form includes a submit button and the entire site is designed to be responsive. When zooming in or out of the browser (ctrl + scroll up/down), I noticed ...

htmlcss

Executing a function within a nested if statement in Node.js

I have been working with the oAuth2.0 package and came across a function called "saveToken" which generates and saves an access token every time a user sends a post request with allowed credentials. However, this function currently generates a new access t ...

javascriptnode.jsmongodbfunctionoauth-2.0

Guide to positioning an anchor tag in the middle of a container, ensuring the anchor fills the entire space of the container

I'm currently working on making an anchor element expand to cover 100% of its parent element, allowing the entire area to be clickable while also centering the text both vertically and horizontally within the parent. I need some guidance on what CSS c ...

htmlcss

The Fab Button from Material UI remains beneath the left split-pane

Is there a way to ensure the Fab button is completely visible? The left side often gets hidden under the left pane. I attempted to increase the z-index, but it did not have any effect. View on CodeSandbox <UpperPane> <Fab ...

cssmaterial-uisplitpane

The program is not executing properly after the initial function is invoked, causing it to deviate from its intended

Could you assist me with this source code for the hangman game? I have added an extra content genre and difficulty level to it. After playing the first round, if the player chooses to play again triggering the loop function, the words function is called o ...

pythonfunctionloops

Prevent event propagation when a CSS pseudo-element is active

In my project, there are two elements: .parentElement and .childElement. Both have the :active implemented to appear darker when pressed. The .childElement is nested inside the .parentElement. I am looking for a way to prevent the .parentElement:active fr ...

htmlcsspseudo-class

What is the best way to ensure this is responsive with only 5 cards displayed in a row?

Create a responsive layout with only 5 cards in a row. I attempted this, but it's not working. What should I add? I want the number of items in a row to adjust according to the size and always hold a maximum of 5 elements in a row. <!DOCTYPE html&g ...

htmlcssflexboxbootstrap-5

Changing over to the left hand coordinate systemUniquely converting to a

One of the challenges I am facing involves an application that loads a model. Upon receiving a server response, I am provided with information regarding the axis to use for the right and up orientation. The format in which this information is sent can be ...

javascriptfunctionthree.jscoordinate-systems

How can I adjust a large image to fit the browser window using CSS?

I have a large image (3000px by 2000px) that I want to use as the background for my website and adjust it to fit the window size. Currently, I have implemented the following CSS: body { background: url('image.jpg') !important; background ...

htmlcssimagebackgroundposition

Display the PrimeFaces dialog in the middle of the screen

I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

cssuser-interfacedialogdatatableprimefaces

Struggling to design a functional mobile keyboard

I've been working on creating a mobile keyboard, but I'm facing some issues with the JavaScript part. The problem seems to be in my code as the keyboard isn't responding when I try to type. Here's a snippet of the JavaScript I'm us ...

javascriptjqueryhtmlcsskeyboard