What is the best way to incorporate background colors into menu items?

<div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 fl logo">
                <a href="#"><img src="images/main-logo.png" alt="logo" /> 
                </a>
            </div>
            <div class="mobile">
                    <a id="mobile-menu" href="#">
                        <div class="mob-bar"><span></span></div>
                    </a>
             </div>
            <div class="col-lg-8 col-md-8 col-sm-12 right-nav" id="right-nav">

                <ul>
                    <li>
                        <a href="index.php">HOME</a>
                    </li>
                    <li><a href="aboutus.php">ABOUT US</a></li>
                    <li><a href="service.php">SERVICES</a></li>
                    <li><a href="news.php">NEWS</a></li>
                    <li><a href="contactus.php">CONTACT US</a></li>
                </ul>
            </div>
            <div class="col-lg-1 col-md-1 fl right-3">
                <div class="fl search-icon">
                    <a href="http://www.1008jobs.com/search/normal" target="_blank"><i class="fa fa-search" aria-hidden="true"></i></a>
                </div>
                <div class="slideouticons">
                    <input id="togglebox" type="checkbox">
                    <label for="togglebox" class="mainlabel"><i class="fa fa-share-alt"></i></label>
                    <div class="iconswrapper">
                        <ul>
                        <li><a href="#"><i class="fa fa-facebook" title="Facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus" title="Google Plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p" title="Pinterest"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This is a code snippet that I have integrated into my PHP file and included on all pages. My question is, how can I dynamically change the background color of navigation items using jQuery or JavaScript without causing the page to reload? If I use .addClass() on the anchor tag, it triggers a page reload and resets the script execution level. Can someone suggest alternative methods to achieve this effect?

javascriptphpjqueryhtmlcss

Answer №1

.navigation-right ul li{
  background: #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

Unusual Quirk with PHP File Uploads

Facing a peculiar problem while trying to upload image files on the live server. The move_uploaded_files() function is returning true, but the image itself is not getting uploaded. if(move_uploaded_file($_FILES["img"]["tmp_name"],'./shot_images/&apos ...

phpfile-upload

Unable to render page with scrapy and javascript using splash

I am currently trying to crawl this specific page. Following a guide on Stack Overflow to complete this task, I attempted to render the webpage but faced issues. How can I resolve this problem? This is the command I used: scrapy shell 'http://local ...

javascriptpythonscrapyscrapy-splash

What is the best way to track all method calls in a node.js application without cluttering the code with debug statements

How can I automatically log the user_id and method name of every method called within a javascript class without adding logger statements to each method? This would allow me to easily track and grep for individual user activity like in the example below: ...

javascriptnode.jsloggingcoffeescript

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

htmlcss

Having difficulty transferring navigation props between screens using react-navigation

Within my ContactList component, I have utilized a map to render various items. Each item includes a thumbnail and the desired functionality is that upon clicking on the thumbnail, the user should be directed to a new screen referred to as UserDetailsScree ...

javascriptreactjstypescriptreact-nativereact-navigation

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...

htmlangularjsvalidation

When attempting to execute a promise within a test, encountering a 400 error in a NodeJS environment

I recently started using Contentful, a new JavaScript library for creating static websites. My goal is to incorporate it into my Node.js project. To achieve this, I developed an app file called getContent.js: 'use strict'; var contentful = req ...

javascriptnode.jstestingpromisecontentful

Price and advantage in a single line of HTML code

Is there a valid reason for creating one-line HTML? Or is it better not to? I understand that reducing file size is a benefit, but we also need to consider the cost on the server of adding functions to generate one line HTML. Additionally, making changes ...

htmloptimization

Best practices for effectively managing a sizable dataset in Vue.js

My task at hand is to create a visualization dashboard that can operate solely in the browser, utilizing Vue.js, D3, and JavaScript. The dataset I am working with is stored in a .json file that is 48 MB in size. However, upon parsing the file using d3.json ...

javascriptvue.jsd3.js

Show the components only if the final digit in their identification number is less than i

I have several span elements with IDs like "tag1", "tag2", etc. I want to display only the spans whose ID ends with a number less than 19. These elements are part of a class called "notVis", which is hidden by default using $(".notVis").hide(); when the ...

javascriptjquery

The Controller received a JSON object that was empty

I know this question has been asked countless times, but I've tried all solutions with no success. Here's the JSON object in question: { "manufacture":"HP", "model":"testModel", "serialNumber":"testSerial", "description":"Test Descript ...

javascriptasp.netajaxvb.netasp.net-mvc-3

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

jquerycssdatepickermodal-dialog

Creating dynamic captions in an Angular grid is an essential feature for enhancing the

Is there a way in Angular to dynamically update the grid titles based on an array of elements in the model? How can I display them as captions? For instance, imagine we are currently in week 202010. I would like to automatically generate the next five wee ...

javascriptangularjsangular

Is it possible to anticipate a particular word following a route parameter in Node.js?

My current route setup looks like this: router.get('/:board/:threadId', function(req, res, next) { // performing actions here }); When users visit /a/1, it triggers the route with board = a and threadId = 1. Now, I want users to have to vis ...

javascriptnode.jsexpress

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

I came across discussions about this issue here and here, but unfortunately, the solutions provided didn't work for me. I'm attempting to extract parameters from the URL using req.query. In my server.js file, I've implemented the following: ...

javascriptnode.jsreactjsexpress

How can I utilize the parseFloat feature within my dedicated parseFloat function located in an angular factory?

What is the solution for accessing parseFloat within an angular factory function named parseFloat? angular .module('myApp') .factory('mathService', [MathService]); function MathService() { return { parseFloat: myGl ...

javascriptangularjsangularjs-serviceglobal

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

I have elements with names like kra[0][category], kra[1][category], and so on. However, I am facing difficulties in selecting these elements by name. Here is my jQuery code: $("[name=kra[0][category]]").prop("disabled", true); ...

javascriptjquery

Enter your phone number in the designated field

I am looking to receive mobile numbers from various countries as input. I attempted to achieve this using the following code: <input type="tel" minlength="8" maxlength="10" name="Number" id="Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" class="form-co ...

htmlvalidationbootstrap-4

Tips for swapping out a specific string in an HTML webpage with a different string using JavaScript

For my HTML website, I am trying to replace one string with another using JavaScript. Specifically, within the nodeList "AuthorList," there is a string called "Test String" that needs to be changed to "new test." I have attempted various modifications of ...

javascriptif-statementreplacenodelist

I am currently struggling with the mapquest GeoJson integration within my Node/Express application. I keep encountering an error message that reads "body used already."

I attempted to utilize the mapquest API by following the provided documentation, however I encountered an error message: HttpError: body used already for: Below is my geoCoder.js configuration: const NodeGeocoder = require('node-geocoder'); con ...

javascriptnode.jsexpress