Adjust the appearance of highlighted menu items with CSS to enhance user experience

I am trying to enhance the visual appearance of the currently opening page using custom CSS styles. Below is a snippet of my HTML code:

<ul class="nav" id="nav">
  <li id="home">
    <a href="home.html" data-id="home" target="ifrm">Home</a>
    <ul>
     <li><a href="item1.html" target="ifrm">item1</a></li>
     <li><a href="item2.html" target="ifrm">item2</a></li>
     <li><a href="item3.html" target="ifrm">item3</a></li>
    </ul>
  </li>
  <li id="skill"><a href="skill.html" data-id="skill" target="ifrm">Skill</a></li>
  <li id="research"><a href="research.html" data-id="research"    target="ifrm">Research</a></li>
  <li id="link"><a href="link.html" data-id="link" target="ifrm">Link</a></li>
</ul>
<iframe name="ifrm"></iframe>

I aim to modify the font and background color of the menu list based on which page is being loaded in the iframe.

javascripthtmlcss

Answer №1

$(function(){
   $('li a').click(function(){
     $('li a').each(function(a){
       $( this ).removeClass('selectedclass')
     });
     $( this ).addClass('selectedclass');
   });
  
  $('ul a').click(function(){
     $('ul a').each(function(a){
      $( this ).removeClass('selectedclass')
     });
     $( this ).addClass('selectedclass');
   });
});
li a.selectedclass
{
  color:red;
  background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="nav">
          <li id="home"><a href="home.html" data-id="home" target="ifrm">Home</a>
  <ul>
<li ><a href="item1.html" target="ifrm">item1</a></li>
<li ><ahref="item2.html" target="ifrm">item2</a></li>
<li ><a href="item3.html" target="ifrm">item3</a></li>

  </ul>
  
  </li>
          <li id="skill"><a href="skill.html" data-id="skill" target="ifrm">Skill</a></li>
          <li id="research"><a href="research.html" data-id="research"    target="ifrm">Research</a></li>
          <li id="link"><a href="link.html" data-id="link" target="ifrm">Link</a></li>
        </ul>

<iframe name="ifrm"></iframe>

To implement this functionality, a class with the required styles must be defined first. Then, when an anchor tag is clicked, remove this class from all other elements and add it to the clicked anchor tag.

Answer №2

Insert the following snippet into your document

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $("a").click(function(){
        $("a").css("color","GREEN"); // replace this color with the original one
        $( this ).css( "color", "PURPLE" ); 
    });
</script>

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

Is it possible for me to create an If statement that can verify the current index within a Map?

I have the following TypeScript code snippet: export default class SingleNews extends React.Component<INews, {}> { public render(): React.ReactElement<INews> { return ( <> {this.props.featured ...

javascripttypescript

Space left vacant following an unordered list item

Is there a way to remove unwanted space after an unordered list in IE and Firefox, specifically in the last HTML <li> item? I've tried adjusting the ul width but it didn't work. Any ideas on how to get rid of the space? Thanks. #menubar ...

htmlcss

What could be the reason for the GET request not functioning properly in Node.js?

const express = require('express'); const mongoose = require ("mongoose"); const app = express(); const Student = require('../models/students'); require('dotenv').config(); const PORT = process.env.PORT || 3000; const co ...

javascriptnode.jsangularmean

What is the best way to retrieve information from a json file using axios in a React project?

I'm having trouble retrieving JSON data. { ID string `json:"id"` Amount int `json:"amount"` Month string `json:"month"` PayFailed bool `json:"pay_failed"` } I’ve written the foll ...

javascriptjsonreactjsecmascript-6axios

Guide to creating a new browser tab in Java Script with customizable parameters

Here is a function I created to open a new window with a specific URL and pass certain parameters. function viewWeightAge() { var userNIC = document.getElementById("NICNo"); var childName = document.getElementById("c ...

javascript

Issue with Jquery causing tabs to malfunction

Check out the CodePen I'm currently working on where I have included the following Jquery code to create a tab-style interface where each button displays specific content. Here's the Jquery code I'm using: $('.content-canvas').fi ...

jqueryhtml

CSS hover pseudo class causing issues with element positioning

I'm currently working on a basic web page project to practice my HTML and CSS skills. I have added a hover pseudo class for the croissant image, but when I hover over it, the coffee cup image unexpectedly shifts to the right by around 50 to 100 pixels ...

htmlcsscss-selectors

Library of DHTML that manages images and videos with the help of AJAX

I have a detailed question on this topic. Breaking it down to seek specific help. Exploring client-side framework options? While prototype and jquery are familiar, there are numerous other choices with potential for async download handling. Which framew ...

javascriptcssajaxdhtmlclient-side

Troubleshooting Issue: Bootstrap 5 Navbar Dropdown Popper Functionality Not Function

I recently updated to the latest release of Bootstrap 5.3 and encountered an issue with my dropdown menu functionality. I have the necessary Bootstrap JavaScript file saved in a folder named bootstrap.js, along with the Popper script saved as popper.js. Th ...

htmlbootstrap-5

Issue with md-stretch-tabs in Angular-Material causing a problem

I am in the process of developing an Angular-based application. ISSUE: I included md-stretch-tabs in my md-tabs element, but when I switch to tab#2, the tab retracts as if there is not enough space to flex. Is this problem related to dependencies or the c ...

javascripthtmlangularjsangular-material

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

What are the best practices for implementing multiple <router-outlet> in an Angular 4 project?

Is it possible to incorporate multiple <router-outlet> in an Angular 4 project? Specifically, how can I ensure that when navigating to the /docs path, the WelcomeComponent is displayed in the outlet with the name 'welcome', while all other ...

htmlangulartypescriptangular-ui-routerangular-routing

A guide to sorting an array based on user input using Javascript

I have developed an app that utilizes JavaScript and the VueJS framework. I am currently working on implementing a 'dropdown' feature for items that are dynamically filtered based on user input. Below is the code snippet responsible for renderin ...

javascriptarraysjsonvue.jsfilter

A study of Cycle2 and Firefox's Image Blinking

Currently troubleshooting my jQuery Cycle2 slideshow issue on Windows 7 and FireFox. The problem only occurs in this specific scenario, where images load partially before fully displaying one second later. For a visual of the issue, check out this video: h ...

jqueryhtmlcssfirefoxjquery-cycle

AngularJS experiencing issues with deleting function implementation

Here is my JavaScript code: camListApp.controller("Hello", function($scope, $http, $uibModal){ $scope.del=function(data){ var result=confirm('are you sure?'); if(result==true){ var index=getSelectedIndex(data); ...

javascriptangularjsspringmongodb

Japanese Character File Naming Convention

When dealing with certain Japanese characters, the content disposition header appears as follows: Content-Disposition: attachment; filename=CSV_____1-___.csv; filename*=UTF-8''CSV%E3%82%A8%E3%83%93%E3%83%87%E3%83%B3%E3%82%B91-%E3%82%B3%E3%83%94%E ...

javascriptjqueryreactjsdownloaddocument

Is it possible to trigger the alert message by utilizing this code snippet?

Is it possible to display a message using this function? var start_database = function() { alert('hello'); }; window.setTimeout(start_database, 1000); ...

javascriptjquery

Is there a way to assign a unique scrollTop value for a specific scrollspy location?

I have a custom script that tracks the current position within a menu and applies an active class to it. However, I require specific rules for the ID contact_form. Specifically, I need to add 1000px to the scrollTop value for that particular ID location. ...

javascriptjqueryhtmlweb

Displaying multiple info windows on a Google Map using React

I'm in the process of developing a Google Maps API using react-google-maps and I want to add multiple markers to display information about cities from around the world in info windows. However, when I click on one marker, all the info windows open at ...

htmlreactjsmarkerinfowindowreact-google-maps

Inexperienced JavaScript user looking for help with handling XMLHttpRequest response data

It's been well over a decade since I last dabbled in JavaScript, so here I am again. My goal is to create a dynamic graph that updates in real time using data from either my backend database or my ESP32 micro-controller. While it's easy to genera ...

javascript