CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

Toggle menu active

Hey I am doing a menu and I want that when I click the item enter in active position and then when another item is clicked it changes to the recently clicked to active and remove the state from the last one, this is what I am doing but is not working... I appreciate if someone can help me.

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");
}

Upvotes: 4

Views: 1602

Answers (2)

Barry Chapman
Barry Chapman

Reputation: 6780

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

This is what you want to do

Change your CSS:

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

Your specificity is being overridden by your default class.

Working link: http://jsfiddle.net/barrychapman/epaE3/3/

Upvotes: 2

BumbleB2na
BumbleB2na

Reputation: 10743

This is similar to a solution I recently came up with that uses the "hashchange" browser event to set the active element.

Here's a jsfiddle example that you can use.

Javascript:

$(".nav-Ppal li a").on('click', function(e) {
    // Hide all content, display the one related to 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);
});

Also, put the "active" class on your first element so that something looks active when it first loads:

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

Upvotes: 0

Related Questions