Using jQuery: If the URL includes a specific string, then modify the background color of a particular tag

I need to dynamically change the background color of a tag in my code based on the URL. If the URL contains Suisse, I want the background color of the tag #switch-univers li a.bilgroup to be green.

JS

if (window.location.href.indexOf("Suisse") > -1) {
  $('#switch-univers li a.bilgroup').css({ backgroundColor, 'green' });
} else if (window.location.href.indexOf("Sales") > -1) {
  $('#switch-univers li a.sales').css({ backgroundColor, 'blue' });
} else if (window.location.href.indexOf("My%20desktop") > -1) {
  $('#switch-univers li a.lifebil').css({ backgroundColor, 'pink' });
}

Here is my HTML:

<body>
  <Div id= « switch-univers » >
    <li><a class=“bilgroup“>Suisse</a></li>
    <li><a class=“sales“>Sales</a></li>
    <li><a class=“lifebil“>My desktop</a>
    </li>
  </div>
</body>

However, nothing seems to be happening... Any suggestions?

Answer №1

Give this a shot.

<div id="toggle-universe">
    <li><a class="groupot">Paris</a></li>
    <li><a class="profits">Profits</a></li>
    <li><a class="worklife">My workspace</a>
    </li>
</div>

JQuery:

$(document).ready(function(){
 if (window.location.href.indexOf("Paris") > -1) {
  $('#toggle-universe li a.groupot').css('background-color', 'green');
 } else if window.location.href.indexOf("Profits") > -1) {
  $('#toggle-universe li a.profits').css('background-color', 'blue');
 } else if (window.location.href.indexOf("My%20workspace") > -1) {
  $('#toggle-universe li a.worklife').css('background-color', 'pink');
 }
});

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 execute response

I'm facing an issue with a form in which I am utilizing jquery.ajax to execute PHP code in the background. Unfortunately, my JavaScript code isn't handling the response from the script properly. Interestingly, if I use if (status == "success"), ...

`troubles integrating external modules in nuxt application`

Just starting with nuxt and incorporating it with vuetify. My aim was to integrate a Google Places Autocomplete feature, so I stumbled upon this: vuetify-google-autocomplete. It seemed simple enough to implement. But turns out it's not that straightfo ...

The custom styling in custom.css is not taking precedence over the styles defined in

My site is experiencing some element overwriting when I include css/bootstrap.min.css, such as 'a' tags, the .nav bar, and fonts used on the site. Load order: <link href="css/bootstrap.min.css" rel="stylesheet"/> <link rel="styleshe ...

Jade not binding correctly with Angular.ErrorMessage: Angular bindings are

Struggling with simple binding in Angular and Jade. I've tried moving JavaScript references to the end of the document based on advice from previous answers, but still no luck. Any ideas on what might be wrong? File: angular.jade extends layout blo ...

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema

My Objective Is If data is found using the findOne() function, update the current endpoint with new content. If no data is found, create a new element with the Schema. Issue If there is no data in the database, then the first if statement throws an ERR_H ...

Surprising outcomes encountered while attempting to load a text file into an array with JavaScript

Currently, I am in the process of developing an emulator and seeking to compare opcode logs from another functional emulator. The log containing executed opcodes is prepared for comparison and follows this format: //log.txt (10000 lines long) 0 195 33 195 ...

Phonegap experiencing issues with executing JavaScript code

My attempt to utilize phonegap is encountering an issue where my javascript is not running. Here's what I've tried so far: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" / ...

The useEffect hook in ReactJs is triggering multiple times

Encountering challenges while developing an Infinite scroll using ReactJs and Intersection observer API. Upon initial application load, the API gets called twice instead of once. This behavior may be due to strict mode, although not confirmed. Additionall ...

Using jQuery, you can enclose a string of text with HTML tags easily

This specific content within the span is being dynamically created by PHP. However, I am uncertain how to efficiently target the text string in order to begin using jQuery. <!-- input: --> <span class="price">RM1,088.00 Annually + RM10.00 Se ...

Error code 8070000c is specific to Uploadify and can only be encountered when using the

Encountered an issue with jQuery uploadify - receiving error message: SCRIPT16389: Could not complete the operation due to error 8070000c. jquery.uploadify.v2.1.4.js, line 292 character 5 This error occurs on the second attempt when using IE browser. Any ...

The ajax call cannot be processed because the request method 'POST' is not supported

I am currently encountering an issue with making an ajax call to my spring controller for creating some data in the database. The code for the ajax call looks like this: function sendDataToController(param1, param2, index1, index2, dataType) { $.ajax( ...

What tool can be used for formatting and syntax highlighting when working with ejs (embedded javascript) templates?

When working on my project, I utilize EJS as the express templating engine. While it is user-friendly and efficient, I have encountered difficulties when it comes to editing files - the text highlighting could be better, and I have not been able to find an ...

Is it possible to use Three.js as the backdrop for a website design?

For a new project on my website, I am considering using three.js for an interactive experiment. My idea is to take an existing experiment that I already have the code for and integrate it as a dynamic background for my site. Does anyone have experience wi ...

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

Error in Next.js 13 due to Prisma table mapping causing hydration issues

I recently created a basic project in Next.js 13 and encountered a Hydration Error even though my project is not doing much. The code snippet below seems to be the cause of the issue: import { PrismaClient } from "@prisma/client"; export default ...

What is the best way to implement this component into my vue.js project?

I am having trouble integrating this vue component into my app as it is not loading properly. You can find the source of the component here. The following warnings are showing up: Unresolved function or method isNumeric() at line 35 Unused parameter e at ...

Issue with Mouse Hover not functioning properly across various 3D objects

Trying to create a 3D line chart? Check it out Here Currently, the points and lines are working fine. However, I only want to detect mouse hover on the points (spheres) and not on the lines or grid. To achieve this, I have segregated all elements into dif ...

What is the process of using the delete function in combination with ajax and php?

Currently, I am working on a school database project for my homework assignment. I have been learning about CRUD operations and attempting to implement them in my project. However, I have encountered an issue with the functionality of the delete button. I ...

The PureComponent FlatList does not refresh properly even after including extraData={this.state} as a prop

After conducting some research, I discovered that using a PureComponent instead of a regular Component can enhance the performance of my FlatList. By doing so, only the row that was changed will be re-rendered rather than the entire list. However, I encoun ...

What steps can be taken to stop images from overflowing a flex-grow-1 item?

https://i.sstatic.net/1Qgec.pngHello, I'm facing an issue with my image. I am dealing with 3 sections: Main Content Image and other components (main section) Button Currently, I need to ensure that the image height is set to a maximum of 100% of the ...