the background color for the menu on the page remains constant and does not alter

Check out this jsfiddle link for more information: http://jsfiddle.net/fht7zsm2/

To modify the background color of the current page, I utilized the following code:

.sf-menu .active{
             background-color:#1B3E70;
             color:white;

        }

In an attempt to implement this change, I included the script below in the footer section. Despite trying to place it in the header, the desired effect was not achieved:

<script>
$('.sf-menu a').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        });
</script>

I found helpful resources on how to accomplish this task at the following links: Change link color of the current page with CSS

Here is another useful jsfiddle example: http://jsfiddle.net/7VBy9/

Answer №1

In the JavaScript section of JSFiddle, you can simply eliminate the <script> tags as they are unnecessary.

http://jsfiddle.net/fht7zsm2/

$('.sf-menu a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

Answer №2

It seems that both anchor tags are not siblings since they are contained within different list items which are actually siblings.

$('.sf-menu a').click(function(){
        $(this).addClass('active').closest('li').siblings('li').find('a').removeClass('active');
});

Check out the updated fiddle here!

Answer №3

Another <a> element is not considered a sibling of the original <a> element.

Alternatively, you can implement the following code:

$('.sf-menu a').click(function () {
    $('.sf-menu a').removeClass('active');
    $(this).addClass('active')
});

Check out this demo - http://jsfiddle.net/fht7zsm2/2/

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

Avoid the issue of a fixed position navigation bar overlapping with a sticky footer

I need help with making a navigation bar stick to the bottom of the viewport without overlapping the fixed-height sticky footer. Here is the basic markup for reference: <div id="wrap"> <div id="main"></div> </div> <div id="fo ...

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: https://i.sstatic.net/fIkQr.png Upon inspecting in Chrome developer tools, I noticed that the ele ...

Tips for adjusting the size and positioning the ng bootstrap carousel in the center

My Angular project is using ng bootstrap, but I'm facing a styling issue. The content doesn't display in the center, rather it appears in the upper left corner: example I would like the content to be centered and wide under the blue headbar. W ...

Utilizing APIs to track YouTube subscriber data

I want to set up a page with just one YouTube subscribe button. When a user clicks on the button, a subscription request will be sent to the YouTube channel specified in the code, and the user will be subscribed. If the user is not logged in to Gmail, the ...

Arranging 2 divs side by side

As a beginner, I'm struggling to find the answer because I have no idea what search terms to use. Now, I have a form <form action="#" method="POST"> <div id="labels"> <label>CMS System</label><p> ...

Can you provide some examples of CSS code snippets?

Can someone share some CSS codes similar to :hover that can be used in the : part for different effects? I tried looking it up but couldn't find much, so any help would be greatly appreciated. ...

The @font-face feature in IE11 encounters issues when utilized within an @media query

In my IE11 browser, I am utilizing fonts downloaded from MyFonts. When I specify them as shown below, they load without any issues: @import url("//hello.myfonts.net/count/myFId"); @font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url(&apos ...

How to layer a div on top of another using CSS

I have a container div that is styled with CSS properties. When a button is clicked, I need to display a modal overlay with a message. <div class="dvLanding"> <div class="popupArea"> <span class="VoteOnce">You can only vote ...

Using the device's width and height with material-ui

Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...

Is the jQuery AJAX call using POST method being retrieved as $_GET?

Below is a snippet of code that I've successfully implemented: <script type="text/javascript"> $(document).ready(function() { // Initializing the table $('#table_1').tableDnD({ onDrop: function(table, row) { $.tab ...

Is it possible to create a webpage layout with CSS using the flex or block properties?

This code is automatically generated HTML from a CMS and the items will be dynamic inside a ul tag. However, I require a layout similar to the image below: https://i.sstatic.net/1xnow.png * { box-sizing: border-box; } ul { list-style: none; padd ...

Using jQuery to create dynamic elements that fade out with timers

My website has a simple message system that displays messages in a floating div at the top of the page. Each message is supposed to fade out after a certain amount of time, but I want users to be able to pause the fading process by hovering over the messag ...

A guide on how to initiate a click event in Angular 5 using JQuery

I am trying to trigger a click event for each element based on its id, but it doesn't seem to be working. Below is the code I am using: ngOnInit() { this.getProductsLists(); } getProductsLists() { this.supplierService.getProductLists() .sub ...

Issue with Ajax reappearing the second time

Currently, I am experiencing an issue with the sorting function on search results. After performing a search, if I try to change the value in the dropdown for filtering the number of results per page, it works fine for the first time. However, upon further ...

Issues with the loading of CSS in Wordpress

I transferred the project from the server to my personal computer (localhost). However, whenever I make changes to the css file, these modifications do not appear on the website when viewed locally. After attempting to switch browsers and clear the browse ...

Is there a way for me to patiently wait for a jquery function to receive a response from an ajax get request?

One issue I'm facing is related to a function that returns an ajax get response: const fetchAjaxResponse = function () { $.get("/Page1/Index?handler=MyFunction", { itemId: itemId}) .done(function (response) { return respo ...

Find out if the On/Off switch is in the "on" or "off

My HTML switch code is shown below: $('#myonoffswitch').click(function () { alert($('#myonoffswitch').val()); }); .onoffswitch { position: relative; width: 77px; -webkit-user-select ...

What is the best way to incorporate an image using <ul> type formatting?

Appearance <style> ul{ list-style-image: url('../8iAbk7rjT.png'); } </style> Development <ul> <asp:DataList ID="dd" runat="server"> <ItemTemplate> <li><a href="/Pages/index.aspx?cate ...

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...