comment le style sélectionné bouton/lien avec les css ou javascript?

Je voudrais à mon style bouton sélectionné.
Je voudrais afficher une lumière bleu-bordure autour de l'image de mon choix de bouton pour afficher la page que l'utilisateur est sur. (ou tout simplement utiliser le même planer comme une image de la touche sélectionnée de l'image lorsque le bouton est enfoncé.)
Je n'ai pas de succès avec le lien css sélecteurs :visited, :focus, ou :sélectionné.
N'est ce besoin d'une solution d'activer javascript?
merci pour tous les pointeurs!

Pouvez vous s'il vous plaît inclure le code source de votre question?

OriginalL'auteur xxx12123 | 2011-08-11

  1. 2

    vous devez utiliser :active pseudo-classe css pour réaliser ce que vous voulez.

    l' :active pseudo-classe est utilisée uniquement lorsque u appuyez et maintenez le bouton vers le bas (de la presse)
    css :active sera appliqué lors de votre navigateur l'url correspond à votre point d'ancrage (une balise) url
    Êtes-vous sûr de cela? Je n'ai pas entendu ça avant.
    oui, @PrashantLakhlani Lakhani est droit. Navigateur l'URL doit correspondre à la balise d'ancrage URL d'appliquer la :acive classe CSS.

    OriginalL'auteur Prashant Lakhlani

  2. 2

    j'ai l'habitude de simplement une classe supplémentaire nom sélectionné 

       <div class="button selected">Button 1</div> 
   <div class="button">Button 2</div>

  .selected {
      border: 1px solid #0000ff;
  }

    Il dépend de la façon dont vous affichez votre page (à l'aide d'ajax ou de l'actualisation à chaque clic). Si vous utilisez javascript pour charger le contenu de la page que vous venez de mettre un supplément d'un nom de classe à l'aide de javascript lorsque le bouton est cliqué.

    OriginalL'auteur blejzz

  3. 1

    jQuery Solution avec votre CSS

    Vous auriez probablement eu envie de vérifier d'abord si elle est sélectionnée, cette solution fonctionne avec des choses comme Twitter Bootstrap, où vous pouvez faire de n'importe quel élément agir comme un bouton:

    $(function () {
    $('div.button').click(function(){
        if ($(this).hasClass('selected') {
                $(this).removeClass('selected');
                //Insert logic if you want a type of optional click/off click code
            } 
            else
            {
                $(this).addClass('selected');
                //Insert event handling logic
            }
    })
});

    OriginalL'auteur Wes Eklund

  4. 0

    Vous, en fait, plus besoin d'utiliser de javascript. Je l'ai fait dans un projet pendant un certain temps, en parcourant les liens dans la barre de navigation, et la définition de la catégorie "sélectionnée", celle que l'utilisateur est en train de visiter.

    Si vous utilisez jQuery, vous pouvez l'accomplir comme ceci:

    $(function() { 
    $('#navbar li').each(function() { 
        if ($(this).children('a').attr('href') == window.location.pathname)
        {
            $(this).addClass('active');
        }
    });
})

    Le CSS Pseudo-sélecteur :active ne pas être encore actif après une pagereload.

    Je suis un idiot désolé.. oublié que je dois ajouter une classe choisie pour mon lien a href="index.html" id="indexSelected"/css #indexSelected { background-image: url(../images/indexSprite.jpg); background-position: 0px 51px; } la solution d'activer javascript dans le cas est redondant, mais je vais l'utiliser le cas échéant merci

    OriginalL'auteur Andreas Eriksson