Comment faire des boutons de rester "actif" après avoir cliqué?

Je suis actuellement en utilisant le code suivant pour ma éléments de menu:

HTML

<li>
<a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
<a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
<a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

J'ai besoin d'obtenir les boutons pour rester dans le "actif" de l'état après qu'ils ont cliqué et le chargement de la page/actualise etc.

Si la solution nécessite l'activation de javascript, s'il vous plaît garder à l'esprit que je suis un rang d'amateur, donc je vais avoir besoin d'aucune explication, en termes simples (de préférence avec des exemples).

Je ne pense pas que cette question méritent -1.
Vous voulez qu'il reste actif jusqu'à ce que le chargement de la page, ou même après le chargement de la page? Ce dernier a besoin de vous pour obtenir l'URL avec le javascript (pas impossible).
il ne devrait pas mériter -1.
Suis-je correct que vous cherchez quelque chose comme :visited? Voir aussi: hacks.mozilla.org/2010/03/...
Je pense que la seule approche fiable est d'utiliser des scripts côté serveur ou les cookies.

OriginalL'auteur OCD | 2012-11-30

  1. 3

    Vous avez besoin d'identifier la page en cours. 

    var page = window.location.href;
page = page.substr((page.lastIndexOf('/') + 1));
page = page.split('.');
page = page[0];
//At this point you will have the current page only with no extension or query paramaters
//I.E. "About Us"
page = page.toUpperCase();
//This accounts for upper or lower casing of urls by browsers.
switch(page) {
    case "ABOUT US":
        $('#About').addClass('< name of active button class >');
        break;
    case "SERVICES":
        $('#Services').addClass('< name of active button class >');
        break;
    case "CONTACT US":
        $('#Contact').addClass('< name of active button class >');
        break;
}

    Si vous n'êtes pas à l'aide de jQuery remplacer cette ligne:

    $('#< element name >').addClass('< name of active button class >');

    avec cette ligne:

    document.getElementById("< element name >").className += " < name of active button class >";

    Espère que cette aide.

    De cette façon, seule la page il affiche aurez la "actif" de la classe. Je pense qu'il veut garder toutes les pages visitées "active"
    Qui a besoin d'être clarifié. Il n'est pas judicieux de faire de chaque bouton que vous avez jamais pressé active. Qui serait considéré visité. Si je suis sur "contactez-nous" et je viens "à propos de nous", "nous contacter" est active, alors que "à propos de nous" a été visité. Si c'est en effet ce qui est souhaité, utilisez simplement le :visité le style CSS de <a> balises.
    En fait, si cette solution entraîne uniquement la page en cours d'être "active", c'est exactement ce que je cherche. Je ne suis pas un expert JS mais...où exactement j'ai besoin d'insérer le code ci-dessus? En outre, ce qui est "< nom de l'élément >", se référant à l'? dois-je le remplacer par quelque chose?
    Le nom de l'élément serait la propriété id du bouton. (I. E. "a Propos", "Services", ou "Contact"). Aussi loin que la classe va, vous placez le nom de la classe CSS que vous avez créé. Le code ci-dessus devrait être placée dans une section qui s'exécute sur le document de prêt. $(document).ready(function () { _Place Code Here_ } });. Mes excuses, j'aurais trop demandé. Êtes-vous en utilisant le framework jQuery ou tout simplement du javascript?
    Si vous n'êtes pas à l'aide de jQuery, vous pouvez toujours déterminer le moment où le document est prêt et appliquer ce codage par l'application d'un auditeur comme suit: `document.la méthode addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.le destinataire de l'appel, false ); < Ajouter le code ci-dessus ici > }, false );

    OriginalL'auteur War10ck

  2. 3

    Préférable de simplement tenir à l'utilisation de classes CSS avec quelques JS. De cette façon, vous pouvez mélanger les deux styles pour le pseudoclass (:hover) ainsi que la classe CSS.

    $('.myButtonLink').click(function() {
  $(this).addClass('active_class');
});

    Ou si vous souhaitez activer.

    $('.myButtonLink').click(function() {
  $(this).toggleClass('active_class');
});

    De cette façon, si il y a des changements dans votre présentation, vous n'avez qu'à mettre à jour les styles CSS qui sont en dehors de la classe et ne pas avoir à mettre à jour votre code JavaScript.

    Vous pouvez utiliser la fenêtre ou localStorage élément à garder en scène à travers la page s'actualise.

    var key = getStorageKeyFromLink(link);
window.activeStateLookup = window.activeStateLookup || {};
window.activeStateLookup[key] = {
  element : link
};

    Maintenant, quand votre chargement de la page, vous pouvez simplement mettre à jour toutes les images:

    window.onload = function() {
  var lookup = window.activeStateLookup || {};
  for(var key in lookup) {
    var element = lookup[key].element;
    element.addClass('active_class');
  }
}

    --- EDIT ---

    Voici votre DÉMO.

    L'exemple utilise localStorage, mais il fonctionne de la même chose avec l'objet de la fenêtre. Assurez-vous de copier et de coller le code et de l'essayer sur votre machine locale depuis jsfiddle a quelques blocs à l'encontre de ce qui se passe.

    http://jsfiddle.net/GDXLb/7/

    j'ai besoin d'obtenir les boutons pour rester dans le "actif" de l'état après qu'ils ont cliqué et le chargement de la page/actualise etc. pourquoi est-ce correct?
    N'est-ce pas le même problème que Garry exemple. Une fois le rechargement de la page, le DOM est désactivée sens la classe que vous venez d'ajouter est perdu et hors de propos. Les Classes ne pas rester à partir de la page à page.
    Utilisez simplement localStorage pour maintenir l'état ensuite. Ou utilisez l'élément de fenêtre.
    Maintenant, c'est une bonne réponse 🙂
    matsko - 1. Je n'ai pas besoin 'toggle' fonctionnalité. Donc, ai-je besoin pour mettre en œuvre les 1er, 3e et 4e blocs de code que vous avez fourni?. 2. Suis-je pour penser que je devrais remplacer".myButtonLink' avec '.bouton " puisque c'est la classe je suis aide? ou dois-je le remplacer par l'id par exemple "a Propos"? 3. Devrais-je remplacer 'active_class' avec '.:ce bouton active"? - veuillez préciser. 4. Ai-je besoin pour encapsuler chacun de ces 3 blocs de code <script> balises? où dois-je insérer? puis-je simplement inclure tous les 3 dans la même <script> tag?

    OriginalL'auteur matsko

  3. 1

    Vous pouvez utiliser un peu de jquery pour voir ce que le url est, l'analyser, puis ré-appliquer le active classe pour le lien approprié.

    I. E ( je n'ai pas testé ce... c'est plus une idée...)

    var path = window.location.pathname;

$(a).each(function(){
    if (path.indexOf($(this).prop("href")) > 0){
        $(this).child("button").addClass("active");
        break;
    }
});
    Peut sembler une question stupide, mais je suis censé coller le haut dans une .fichier js et la référence dans le <head> de mes pages web? De toute façon, Webmatrix est en berne: "Peut pas" casser "en dehors de la boucle". Les boutons ne reste pas active. J'apprécie l'aide que. Je suis perdu, d'ailleurs pourriez-vous préciser? Merci.
    Comme mentionné, pas testé, juste un exemple. Si la suppression de la pause et essayer. le each est en fait la réalisation d'une boucle - c'est jquery. Vous pouvez généralement mettre du javascript dans le head de votre page. Pour celui-ci de travailler vous aussi, vous avez besoin de faire référence à la jquery script. accédez à jquery.com de la bibliothèque et de l'aide à l'installation.
    Certains autres ont dit à côté serveur est également une option. Je suppose que pour nous, pour vous aider à mieux vous besoin de dire que les langues que vous êtes capable.
    Vaguement capable, dans le html & css. C'est à ce sujet... :-/
    Yep, vous allez avoir besoin d'apprendre quelques javascript pour ce faire sur le navigateur de fin. Vous recommandons vivement d'utiliser jquery comme il encapsule BEAUCOUP de ce que vous devez faire, et peut être fait avec de simples appels.

    OriginalL'auteur Darren Wainwright

  4. -1
    $('.myButtonLink').click(function() {
 $(this).css('background-position', '0 0');
});

    DÉMO

    j'ai besoin d'obtenir les boutons pour rester dans le "actif" de l'état après qu'ils ont cliqué et le chargement de la page/actualise etc. pourquoi est-ce correct?
    Si l'actualisation de la page, vous allez perdre la classe que vous venez d'ajouter.

    OriginalL'auteur Garry