A technique for cycling through a menu, eliminating a class, and then applying a new class to the active menu option

In my navigation menu, I have a structure that helps in navigating through content slider panels.

 <div id="menu">
  <ul>
    <li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
    <li><a href="#2" class="cross-link">Menus</a></li>
    <li><a href="#3" class="cross-link">Wines</a></li>  
    <li><a href="#4" class="cross-link">News</a></li>   
    <li><a href="#5" class="cross-link">Contact Us</a></li> 
  </ul>
</div>

I am looking for a way to cycle through these elements, remove the existing highlight class, and add it to the currently or last clicked menu item.

If you have any ideas or suggestions on how to accomplish this, please feel free to share!

Thank you,

Jonathan

jquerycssaddclassremoveclass

Answer №1

Perhaps it is possible?

$('#menu li a').click(function(){
  $('#menu li a').removeClass('highlight');
  $(this).addClass('highlight');
});

Answer №2

...Include the necessary tags in your HTML file...
<div id="menu">
   <ul>
     <li><a href="#1" class="cross-link highlight">Sunrise Cafe</a></li>
     <li><a href="#2" class="cross-link">Breakfast Menu</a></li>
     <li><a href="#3" class="cross-link">Lunch Specials</a></li>  
     <li><a href="#4" class="cross-link">Events</a></li>   
     <li><a href="#5" class="cross-link">Contact Information</a></li> 
  </ul>
</div>
<script type="text/javascript">
(function( $ ) {
 $( "#menu ul li a" ).click( function() {
    $( this ).parent().parent().filter( 'a' ).removeClass( 'highlight' );
    $( this ).addClass( 'highlight' );
 });
})( jQuery );
</script>
</body>
</html>

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

Enhancing Image Quality in JavaFx's Scene Builder

Hey everyone! I've been using JavaFx scene builder to create a user interface with some png images. Up to now, I've been using labels and enlarging them to display the pictures, but this solution isn't ideal because I need to create multipl ...

javacssjavafxscenebuilder

Looking to adjust a group of range sliders. Can you help me troubleshoot my code on jsfiddle

I am looking for a way to ensure that my three range sliders all draw from a shared "value pool." For example, if the maximum value is 100 and slider-1 is set to 51, then sliders 2 and 3 should share the remaining value of 49. Currently, when slider 1 is a ...

javascriptjqueryhtml

Instafeed.js experiencing issues with photo uploads

Can instafeed.js function without an active website? I am attempting to incorporate my friend's Instagram photos into the website I'm designing for him, but the site is not yet 'live/active' so I suspect that may be the reason it's ...

javascriptjqueryinstagraminstafeedjs

Fill in the missing keys, values, and data within the JSON object

My JSON data consists of various objects with unique dates and site names. The dataset contains distinct dates such as: 2019-10-01, 2019-10-02, 2019-10-03, 2019-10-04, 2019-10-05. Some dates might be missing for certain sites in the dataset. For example, o ...

javascriptjqueryarraysjsonjavascript-objects

Switching the class for the pseudo-element :after

Consider a scenario where there is a button: <button href="#" class="search no-style search-active" style="display: inline-block;"> <div class="pointer" style="display:none">::after</div> </button> Upon activation of the button, ...

javascriptjqueryhtmlcss

Configuring WebApiConfig.cs for an MVC projectWould you like to know how

Check out the code in my WebApiConfig file: using System; using System.Collections.Generic; using System.Linq; using System.Web.Http; namespace HotelManagementSystem { public static class WebApiConfig { public static void Register(HttpCon ...

c#jqueryajaxmodel-view-controller

Trouble with filtering data columns in datatable

I have been troubleshooting an issue with my table not filtering properly. Even though data is being retrieved and displayed in the table, the input filter boxes are not working as expected. Despite entering characters into the filter boxes, no actual fi ...

jqueryajaxdatatables

Transferring information to a partial view using a jQuery click event

In my Index view, there is a list of links each with an ID. My goal is to have a jQueryUI dialog box open and display the ID when one of these links is clicked. Currently, I am attempting to use a partial view for the content of the dialog box in order to ...

javascriptjqueryasp.net-mvcjquery-ui

What is causing the text below the SVG path to appear thicker?

I am encountering an interesting issue with my SVG green marker. The text inside appears bolder than the same text with the same attributes when it is standalone. https://i.sstatic.net/NYmXX.png Upon further inspection, I noticed that the text within the ...

htmlcsssvg

Tips for aligning an icon vertically alongside text in Bootstrap 3

I've been attempting to center a Bootstrap glyphicon vertically in one column while aligning the text in another column. I've experimented with using tables and ghost cells (referencing Centering in the unknown). I'm hoping there's a so ...

csstwitter-bootstrap

Issue with CSS Dropdown Menu Functionality on Internet Explorer versions 7, 8, and 9

My CSS dropdown menu works perfectly in Mozilla, Chrome, and Safari. However, it's a bit finicky in IE10 (still works) and doesn't work at all in IE9. I've tried to troubleshoot the issue, as there are websites with CSS dropdown menus that ...

htmlcssinternet-explorercross-browser

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

real-time updating of a list in a Jquery and Asp.net web app

In my asp.net application, I have the following code snippet: <div class="divparent" > <div class="child1" ><label> Occupation</label></div> <div class="child2" > <input type="text" name="name" id="Te ...

javascriptjqueryhtmlasp.net.net

Show a list of options when a user clicks on an input field using Ajax AutoComplete with jQuery

I have a form field that looks like this: <div> <input type = "text" class = "form-control" id = "driverplus" placeholder = "Fahrer"> </div> I am using jquery-autocomplete plugin from . Is there ...

jqueryajaxautocomplete

What is the best way to add a class to the initial HTML element in my specific scenario?

Currently utilizing the angular framework in my application. Desire to assign a specific class to only the initial element within my ng-repeat iteration. <div class='initialOnly' ng-repeat = 'task in tasks'>{{task.chore}}</di ...

javascripthtmlcssangularjs

How to design <p> elements inside a bordered container?

I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting. The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the su ...

csshtml

Merge a text input and TinyMCE editor into a new field using JavaScript. Limit TinyMCE editor to only allow Numbered Lists

When the 'Archive to History' button is clicked, I want the Today's Date text field and Last Update WYSIWYG field to append their contents to the Complete Project History WYSIWYG field, without replacing existing text. The date should appear ...

javascriptjquerytinymce

Styling radio buttons with CSS

I've been struggling to align my radio buttons next to their labels. Despite numerous changes to the CSS, I can't seem to get my text boxes, radio buttons, and comment box to line up properly. Specifically, the second radio button is causing alig ...

htmlcss

Deciphering the ins and outs of the jQuery each function - Surprising

I'm currently trying to understand how the each function works. In this specific scenario demonstrated in this fiddle here, my goal is to iterate through the selected elements of a list box individually. Initially, I anticipated an output like this: ...

javascriptjqueryhtml

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css