Activer le menu actif

Hey je fais un menu et je veux que lorsque je clique sur l'élément entrer en position active et puis quand un autre élément est cliqué il change pour le récemment cliqué sur actif et retirer l'état de la dernière, cette est ce que je fais mais ne fonctionne pas ... J'apprécie si quelqu'un peut m'aider.Activer le menu actif

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

Source

2013-04-08 Jhonnatan Gonzalez Rodriguez

pourquoi fais-tu de cette façon? –

FYI: Vous ne devriez jamais commencer un attribut 'id' avec un nombre, et encore moins l'attribut entier est complètement numérique. –

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

Voici ce que vous voulez faire

Modifier votre CSS:

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

Votre spécificité est remplacée par votre classe par défaut.

lien de travail: http://jsfiddle.net/barrychapman/epaE3/3/

Source

2013-04-08 20:08:41

N'oubliez pas de supprimer le fichier console.log après avoir vérifié que la fonction fonctionne. Cela va casser certains navigateurs. – thelr

C'est un bon point :) –

Plus précisément, il va casser IE9. Dans le cas où vous souhaitez quitter la fonctionnalité de débogage, remplacez console.log() par une fonction vide vide. Lorsque vous travaillerez sur votre code, vous n'aurez plus à réinsérer des douzaines d'instructions console.log() partout. –

Ceci est similaire à un solution I recently came up with qui utilise l'événement du navigateur « hashchange » pour définir l'élément actif. Il s'agit d'un jsfiddle example que vous pouvez utiliser.

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

Aussi, mettre la classe "active" sur votre premier élément de sorte que quelque chose semble actif quand il charge d'abord:

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

Source

2013-04-08 20:11:18 BumbleB2na

Activer le menu actif

Répondre

Questions connexes