Changing the background color of an active division using CSS

I am currently in the process of learning, so I appreciate your patience.

Before proceeding, please take a look at this page: Visit my site

If you scroll down, you will notice a sidebar titled NAVIGATE.
I have manually included some sub-menus there and also added a background color change effect when hovering over each section.
Now, I would like to implement a feature where when someone is on the History of CSE page, the sub-option in the NAVIGATE column should reflect the active division or link.

This means that I am looking to add the :active property. The active page's section will display a different background color, like green.

I have tried searching extensively but haven't been able to figure it out.

Thank you for your assistance!

PS: Below is what I attempted, as I am a complete beginner and unsure about what steps to take:

div.sbproduct:hover{
        background-color: #F5AC2B;
    }

    div.sbproduct a:active{
        background-color:#ffffff;
    }

    .sbproduct:hover a{
        color: #ffffff !important;
    }
htmlcsshover

Answer №1

Perhaps this solution will be beneficial for you - utilizing a toggle() function to alter the background color of an active division.

View the working example

// Adjusts the background color of the active division
$( ".sbproduct" ).toggle(
function() {
 $( this ).addClass( "change" );
 },
 function() {
  $( this ).removeClass( "change" );
 }
);

Answer №2

Follow this Jquery code snippet

$(document).ready(function(){

        $("a").click(function(){
        //alert('hi');
          $("a").removeClass()
            $(this).addClass("over")


        }) ;        

    });

Visit this live Demo http://jsfiddle.net/dineshk/X4GSR/6/

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

HTML's dynamic content lacks the ability to scroll

I'm encountering an issue with my HTML page that contains a lot of PHP content, such as menus and product boxes. The problem is that the entire content seems to be frozen and won't scroll. I have tried setting the CSS property for overflow-y to ...

phphtmlscrolloverflow

Sequentially display and hide jQuery divs without any overlap

I'm in the process of developing a feature where a series of divs are displayed sequentially after clicking a button. Simultaneously, I am also enabling webcam capture and sending the picture to a server. The functionality is mostly working as intende ...

javascriptjqueryhtml

Execute an HTTP POST request to the Node server, sending an empty object

For my project, I am attempting to send an HTTP Post request to my Node server from an html form. Despite using Body Parser and setting it up correctly, I am facing an issue where the req.body on my server is returning as an empty object. Can anyone prov ...

javascripthtmlnode.jsexpressfetch

JavaScript code that triggers a function when the mouse is moved over a description box on a

As a beginner in the field of Computer Science, I recently embarked on a project to create a website for sharing science articles with students. The goal is to spark curiosity and interest in science through this platform. One key feature I wanted to inclu ...

javascripthtmlwebonmouseoveronmouseout

If no content is present in a cell of an HTML table, alter the row

I am attempting to create a CSS table that changes the row color if any cell in the row is empty. Here's what I have so far: <style type="text/css"> td:empty { background-color: red; } </style> Is there a way to change th ...

htmlcss

Guide on How to Include data (PDF Base 64) in angular 6 component

Within my Angular 6 application, I am presenting data (a report) in a new window using the following code snippet. *** The 'result' variable contains Base64 data *** if (result != null) { const pdfWindow = window.open(""); ...

htmlangularembed

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...

javascriptjqueryhtml

Guide to efficiently utilizing flex to horizontally position two elements next to each other in a Material UI and ReactJS environment

I have successfully achieved side-by-side components of two cards from Material-UI. However, I am facing an issue when expanding one of the cards. The problem is that Card 1 automatically expands to match the size of Card 2 when Card 2 is expanded, even th ...

javascripthtmlreactjsflexboxmaterial-ui

What is the best way to eliminate headers from appearing in table rows?

I need help figuring out how to eliminate duplicate headers with the css class "thead" that keep appearing in my table rows. Below is the code snippet causing me trouble: for year in years: try: url = 'https://www.pro-football-referen ...

pythonhtmlweb-scrapingbeautifulsoup

Delete the div if it exists following another div and place it within the main div

<div class="error"> <input type="text" name="email"> <div class="error-message">Please Enter Email</div> </div> <div class="i-icon-div">Lorem Ipsum</div> I am trying to identify the div with the class of i-icon-di ...

jqueryhtml

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Displayed on the page is an HTML Video tag, which streams a video from the speaker (WebRTC). <div id="remoteVideoContainer"> <video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true" height="500" width="100%"> ...

htmlcssgoogle-chromewebrtc

The jQuery navigation consistently unveils the initial option every time

My navigation element looks like this: <ul> <li name='first_item'> <ul> <li>item 1</li> <ul> <li>item 1.1</li> <li ...

javascriptjqueryhtmlmouseeventmouseenter

Is it possible to create interlinked HTML pages from markdown files?

Is it possible to create documentation using multiple .md files that reference each other and then utilize a tool like Dillinger to convert these .md files into separate html pages with interlinking? For instance, can I automatically transition (via Dilli ...

htmlmarkdownmultimarkdown

Is it possible to have animations play in reverse once they have completed running?

Hi there! I'm currently tinkering with the transitioning animations for my navigation button. I've successfully implemented the opening animation where the three bars morph into a single line and the menu slides out. Now, I'm looking to crea ...

javascripthtmlcss

Implementing a Basic Div Overlay Effect

There is a Div with the id of "placeholder" located in a table cell, containing three nested divs with ids of "content1," "content2," and "content3." I would like these nested divs to match the size of their parent, "placeholder," and overlap each other. ...

htmlcss

Missing td data when using Beautiful Soup to parse HTML tables in Python

When attempting to extract a table using Beautiful Soup, I encounter an issue. from selenium import webdriver from bs4 import BeautifulSoup import pandas as pd import numpy as np import lxml import xlrd HorseNo = ["T421"] ...

pythonhtmlbeautifulsoup

What could be causing this code to malfunction in Internet Explorer 7?

Code: Demo: In the majority of modern browsers such as Safari, Chrome, Firefox, and IE8/9, the code works perfectly fine. However, there seems to be an issue with IE7, causing it not to work. Any idea why this might be happening? My goal is for the conte ...

htmlcssinternet-explorer-7

How can I align text vertically inside a button using HTML and CSS to ensure it is at the top?

Looking for a solution to a design issue I'm facing. You can view the situation here: jsfiddle <button type="submit"> <div class="icon"></div> </button> button { width: 250px; height: 250px; background: orange ...

htmlcssbutton

What is the process for setting a linear gradient border color on a table row's border?

Currently, I am attempting to apply a linear gradient border color to the table row. Below are the codes for the table: td:first-child { border-left: 1px solid black; border-bottom-left-radius: 50px; border-top-left-radius: 50px; } td:last-child { bor ...

csshtml-table

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

javascripthtmlcsscomparison-operators