javascript - Toggle menu active -
hey doing menu , want when click item enter in active position , when item clicked changes clicked active , remove state last one, doing not working... appreciate if can 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 { 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"); }
$(function() { $(".nav-ppal li a").on("click", function() { $(".nav-ppal li a").removeclass('nav-ppal-active'); $(this).addclass("nav-ppal-active"); }); });
this want do
change css:
.nav-ppal-active{ background: white; color: black; }
your specificity being overridden default class.
working link: http://jsfiddle.net/barrychapman/epae3/3/
Comments
Post a Comment