Activate the toggle menu

Hi there! I'm currently working on a menu and I want the clicked item to become active, switching the active state to another item when clicked. However, my current implementation is not working as expected. Any assistance would be greatly appreciated.

HTML

<div id="nav-pPal">
  <ul class="nav-Ppal">
    <li><a class="btns-nav" id="0" href="#block-intro">01</a></li>
    <li><a class="btns-nav" id="1" href="#block-pq-zolfunza">02</a></li>
    <li><a class="btns-nav" id="2" href="#block-modulos-zolfunza">03</a></li>
    <li><a class="btns-nav" id="3" href="#block-seguridad">04</a></li>
    <li><a class="btns-nav" id="4" href="#block-desarrollo">05</a></li>
    <li><a class="btns-nav" id="5" href="#block-nuestra-ubic">06</a></li>
    <li><a class="btns-nav" id="6" href="#block-noticias">07</a></li>
    <li><a class="btns-nav" id="7" href="#block-preguntas">08</a></li>
    <li><a class="btns-nav" id="8" href="#block-contacto">09</a></li>
  </ul>
</div>

CSS

.nav-Ppal li a {
width: 30px;
height: 22px;
padding-top:8px;
text-align:center;
display:block;
text-decoration:none;
color:#FFF;
cursor:pointer;
background-color: #000;
color: #FFF;
opacity: 1;
-moz-opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
cursor:pointer;
font-family: 'lucida_sans_unicoderegular', Helvetica, Arial, sans-serif;
font-size:11px;
}
.nav-Ppal li a:hover {
background-color: #f7941e;
color: #FFF;
display:block;
text-decoration:none;
cursor:pointer;
}

.nav-Ppal-active{
background: white;
color: black;
}

jQuery

$(".nav-Ppal li a").on("click", checkTarget);
function checkTarget(){
    /*$(".nav-Ppal li a").not(this).removeClass(".nav-Ppal_active");*/
    $(".nav-Ppal li a").addClass("nav-Ppal-active");
    console.log("click");
}
javascriptjqueryhtmlcsstoggle

Answer №1

$(function() {
 $(".nav-Ppal li a").on("click", function() {
    $(".nav-Ppal li a").removeClass('nav-Ppal-active');
    $(this).addClass("nav-Ppal-active");
  });
});

This is the solution you need

Revise your CSS styles:

.nav-Ppal-active{
  background: white;
  color: black;
}

Your default class is conflicting with your specificity.

Check out this working example: http://jsfiddle.net/barrychapman/epaE3/3/

Answer №2

I recently devised a solution that bears resemblance to another one I found, utilizing the "hashchange" browser event to designate the active element.

For reference, here is a jsfiddle demonstration you can refer to.

Javascript:

$(".nav-Ppal li a").on('click', function(e) {
    // Hide all content and show the respective one based on hash-tag    
    $(".document_view").toggle(false);    
    $('.nav-Ppal li').removeClass("nav-Ppal-active", false);
});

$(window).on('hashchange', function() {
    $("a[href='" + window.location.hash + "']").parent().addClass("nav-Ppal-active", true);
});

Additionally, ensure to add the "active" class to your first element so that it appears active upon initial loading:

<li class="nav-Ppal-active">

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

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

AJAX does not execute all inline JavaScript code

I am currently using AJAX to load a fragment of a document. I have successfully loaded 'external' scripts, but I am encountering issues when trying to execute all the JavaScript within <script> tags. Below is an example of the HTML fragmen ...

javascriptajax

Tips on maintaining the original text hues that were established using setForeground() when a QTableWidgetItem is picked

Issue at Hand: Currently, when the first row is selected as shown in Figure 2 below, all text colors are changed to black, instead of maintaining their original style displayed in Figure 1. Is there a way to retain the original colors when a row is selec ...

pythoncsspyside2qtablewidgetqtablewidgetitem

Angular - Brilliant time selection tool (BTS) The TimePicker feature fails to automatically switch to selecting minutes after choosing the hour

I'm currently implementing the Amazing time picker in my app and I'm facing an issue where it doesn't automatically switch to minutes after selecting the hour. component.html <input type="time" atp-time-picker formControlName="time" cla ...

javascripthtmlarraysjsonangular

Extracting text within quotation marks from HTML using Java and Selenium WebDriver

I encountered a piece of code that resembles the following: https://i.stack.imgur.com/gaX1J.png Although I am able to retrieve the link using the command System.out.print(link.getText()); it only returns the value "Saab". However, I also require the da ...

javahtmlselenium-webdriver

Using AJAX to load multiple pages asynchronously

Recently, I put together a website using the following script: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> function loadpage(page) { document.getElementById( ...

phphtmlajaxforms

Record the success or failure of a Protractor test case to generate customized reports

Recently, I implemented Protractor testing for our Angular apps at the company and I've been searching for a straightforward method to record the pass/fail status of each scenario in the spec classes. Is there a simple solution for this? Despite my at ...

javascriptangularjstypescriptprotractorautomated-tests

What is the reason behind utilizing the external 'this' within the inner function in Vue: $this=this?

Recently, I came across some code online that included a line $this=this. My initial interpretation was that this line assigns the 'this' of the outer function to a variable, allowing it to be used in the inner function as well. However, upon fur ...

javascriptvue.js

Leaflet setStyle changes are effective when applied through the console but do not reflect in the actual

I currently have a map with around 1000 polygons that I am loading onto it. My goal is to color these polygons based on a specific property value. The code snippet below showcases my approach, but the results are not as expected. mapLayerFieldGrid = new L ...

javascriptleaflet

Develop a series of sequential tests for the playwright to execute

Can someone assist me with my code? I am attempting to write a test in Playwright that navigates to the forgot password page, creates a new password, and then tries to log in using that new password. However, I am encountering an issue with retrieving the ...

javascripttypescriptplaywright

Limiting text based on the space it occupies

Is it feasible to restrict the number of characters allowed in an input field based on the space they occupy? For instance, W's and M's require enough space for 34 of them. https://i.sstatic.net/xQW5p.png However, regular sentences of the same ...

htmlcssangularmaterial-design

What is the method for adding color to the select and option fields?

On my website, I have created a contact form and I am trying to customize the select field by adding colors like other fields. However, when I choose an option from the select field, it is not showing up. Can you please help me identify what mistake I migh ...

htmlformscss

What is the best way to display the current scroll percentage value?

I'm trying to update this code snippet import React from 'react' const App = () => { function getScrollPercent() { var h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight ...

javascriptreactjsanimationscroll

Tips for avoiding content appearing beneath overlapping elements

I am facing an issue with a hero image that has an overlapping box. I want to add content below the box but it ends up appearing behind the box. How can I ensure that the content shows below the box while maintaining responsiveness? .shell { display: ...

htmlcssflexbox

Can JavaScript be utilized to retrieve the MAC address?

Is it possible to retrieve the Mac addresses of a system for login using JavaScript? ...

javascriptreactjsmac-address

Create new instances of Backbone Models using an existing Backbone Model as a template

Within my app, I am planning to include a configuration file called config.json as a Backbone Model. Here is an example of how it will be loaded: var Config = Backbone.Model.extend({ defaults: { base: '' }, url: 'config. ...

javascriptjsonbackbone.jsbackbone-model

What could be the reason for my array being nested inside another array as a value in a dictionary

I am having some difficulty understanding how the selected array is being returned in my dictionary. Could you please provide me with an explanation? The language being used is javascript. I have constructed a dictionary with arrays as values. However, wh ...

javascriptjqueryarraysdictionary

Exploring angularjs and the concept of variable scoping in relation to

Struggling with variable binding in my angularjs/javascript code for uploading images. Can someone help me out? Here is the snippet of my code: var image_source; $scope.uploadedFile = function(element) { reader.onload = function(event) { image_sourc ...

javascriptangularjs

Styling multiple divs using CSS

What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...

htmlcss

JavaScript Tutorial: Simplifying Character Ranges for Conversion

I am currently working on adapting code I found here to create a virtual keyboard for a foreign alphabet using an online textarea. Below is the modified code: <textarea id="txt"></textarea> <script src="https://ajax.googleapi ...

javascriptjquery