Chosen state of mind for the main landing page

I am currently working on implementing a selected state using jQuery for my website. I have successfully implemented it on all pages except for the home page, as there is no unique identifier such as "www.abcd.co.nz".

For those interested, you can view the JS Fiddle example here: http://jsfiddle.net/zangief007/1ta4gxwn/ 

if (window.location.href.indexOf("/") > -1) {
    $("header ul li a.home").addClass("tn-selected");
}

if (window.location.href.indexOf("about") > -1) {
    $("header ul li a.about").addClass("tn-selected");
}

if (window.location.href.indexOf("links") > -1) {
    $("header ul li a.links").addClass("tn-selected");
}

if (window.location.href.indexOf("contact") > -1) {
    $("header ul li a.contact").addClass("tn-selected");
}
javascriptjqueryhtmlcss

Answer №1

Is it possible to achieve something similar to this?

let selector = "a.home";

if(window.location.href.indexOf("about") > -1) {
    selector = "a.about";
}
else if(window.location.href.indexOf("links") > -1) {
    selector = "a.links";
} 
else if(window.location.href.indexOf("contact") > -1) {
    selector = "a.contact";
} 

$("header ul li "+selector).addClass("tn-selected");

Should we set a.home as the default value?

Answer №2

After analyzing your JSFiddle demonstration:

JS Troubleshoot

The jQuery selectors in your code are searching for an a.about element within a li, inside a ul, housed within a header. However, the JSFiddle demo does not contain a header element.

CSS Trouble

Once you fix the jQuery selectors, your new classes do receive the styles. Nevertheless, your CSS contains improper comma placement which results in the style not being applied.

Modify from:

a.about.tn-selected,
a.contact.tn-selected,
, /* Remove this. */
a.links.tn-selected,
, /* ...and this. */
a.home.tn-selected{
    color:#333;
}

To:

a.about.tn-selected,
a.contact.tn-selected,
a.links.tn-selected,
a.home.tn-selected {
    color:#333;
}

Alternatively:

a.tn-selected {
    color:#333;
}

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

Modifying Owlcarousel 2 settings post initialization

I've encountered an issue with the settings of a carrousel plugin I'm using. I've tried to change the loop and nav options but it doesn't seem to be working. Here is the code snippet: var owl = $(".owl-carousel").owlCarousel({loop: tru ...

javascriptjqueryowl-carousel-2

When I attempt to click on the Cancel button, the database row remains undeleted

After a user clicks on the "Cancel" button, I want to reset the source and remove the iframe to prevent the file from being uploaded to the server. This function is currently working as intended. However, I am facing an issue where even after clicking on ...

phpjavascriptjquerysqlajax

Find out whether the page was reloaded or accessed directly through a hyperlink

I need to find out if the page was accessed directly via a link. If it was, I need to perform a certain action. However, my current implementation is not working as intended, as even a page refresh triggers this action. Is there an alternative method to ch ...

javascriptreactjstypescript

Tips on retrieving a JSON Object from a URL

As someone who is new to web development, I have encountered an issue. When I tried to input the following link https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412 into my browser, I was able to ...

javascriptjsonweb

How can JavaScript be used to modify the locale of a web browser?

Is it possible to programmatically set the window.navigator.language using AngularJS? I am exploring different methods to achieve this. At the moment, I rely on a localization service to handle my i18n localization switching. ...

javascriptangularjslocale

Where can I find information on mastering ajax in asp.net mvc?

I have a couple of asp.net mvc books (asp.net mvc in action, professional asp.net mvc) both with chapters dedicated to ajax. While they provide a solid overview, I am now embarking on a project where ajax is heavily utilized, and although I am well-versed ...

jqueryajaxasp.net-mvc-2

Modify jQuery to update the background image of a data attribute when hovering over it

Something seems to be off with this topic. I am attempting to hover over a link and change the background image of a div element. The goal is to always display a different picture based on what is set in the data-rhomboid-img attribute. <div id="img- ...

javascriptjqueryhtmlcssmouseover

What is the process for configuring the Sequelize Postgres model type to inet in a database?

I have been utilizing the sequelize ORM to manage my postgress database. Within my postgress database, we have been using the inet data type to store IPv4 and IPv6 values. While creating models in sequelize, I encountered the issue of not finding the ine ...

javascriptnode.jspostgresqlormsequelize.js

Changing the class of a div with Selenium using Python

I need to update the layout of a webpage from grid list to simple list, but the challenge is that there is no dropdown or button. Instead, I need to add an active class to the div element. How can I accomplish this using Selenium in Python? <a href=&q ...

pythonhtmlpython-3.xselenium

Unable to locate object for property 'setAttribute' and thus it is undefined

I am attempting to create an accordion using the code below. It works perfectly when the tags are placed together. However, I wish to insert an element inside a different tag elsewhere on the page. <dt> <li class="nav-item" i ...

javascripthtmljqueryaccordion

Stopping the interval in Javascript on button press

Struggling to make clearInterval work properly when connected to a button click action. Also, the function seems to be activating on its own... Take a look at my code below var funky = setInterval(function() { alert('hello world'); }, 2000); ...

javascriptjqueryclearinterval

Issues with AngularJS directives properly binding attributes

As a newcomer to the world of Angular, I have embarked on my first complex directive project and find myself slightly perplexed. My goal is to construct a reusable list of items organized into separate tabs within my application. The list operates uniforml ...

javascriptangularjsangularjs-directive

The layout of HTML emails appears to be malfunctioning on Outlook

Having trouble with my HTML email format not displaying properly in Outlook. The code includes Angular and Bootstrap CSS. I've even added inline CSS specifically for Outlook, but the table stretches to full screen when viewed in Outlook. I've tr ...

htmlcssangularjsemailoutlook

Altering the PHP text hue

Is it possible to customize the color of the print and echo text on your HTML page, rather than having it just in black? Thank you. ...

phphtmlcss

How can JavaScript be used to create a unique signup and login process on

I am struggling with storing sign up and login details in JavaScript. In my previous project, I used PHP and a database to handle this information, so transitioning to JavaScript has been challenging. Here is an example of the sign-up HTML code: <!DOC ...

javascripthtmlauthentication

Refresh FullCalendar in Angular 2 and above

Can someone please assist me with re-rendering or redrawing a full-calendar in Angular using @fullcalendar/resource-timeline? I have updated the data after calling the API and now I need to make sure the calendar reflects these changes. Any guidance on h ...

javascriptangularfullcalendarfullcalendar-scheduler

Ignoring TypeScript overloads after the initial overload declaration

Issue An error occurs when attempting to call an overload method for a specific function. The call only works for the first defined overload, causing an error if the call is made to the second overload with mismatched typing compared to the first overload ...

javascripttypescript

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

javascripthtmlcss

Convert JavaScript objects to strings with JSON strings already included as values

Although this question may seem like a duplicate, I have not been able to find the answer. My issue is with stringifying a JavaScript object that contains JSON strings as values. Here is an example: var obj = {id:1, options:"{\"code\":3,\" ...

javascriptjsonparsingobjectstringify

Discover the method to retrieve the value of the closest input using JQuery

On my webpage, I have several buttons all sharing the same class. Whenever a user clicks on one of these buttons, I need to retrieve the value from the closest input box. It's important to note that there are multiple input boxes and buttons with the ...

jqueryclosest