Comment garder :active de style css après avoir cliqué sur un élément

- Je utiliser l'ancre que ma navigation sur le site. 

<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>

Le CSS

#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}

Je me demandais comment faire pour garder l'élément div style gardez à l' :état actif une fois après le clic jusqu'à ce que je frappe un autre de la barre de navigation item, comment le faire?

  • première chose à ne jamais mettre élément de bloc à l'intérieur d'un élément inline est une mauvaise marque. DIV est un élément de type block & <a> dans un élément inline
InformationsquelleAutor Alpha Chung | 2011-10-12
  1. 15

    Combiner JS & CSS :

    button{
  /* 1st state */
}

button:hover{
  /* hover state */
}

button:active{
  /* click state */
}

button.active{
  /* after click state */
}


jQuery('button').click(function(){
   jQuery(this).toggleClass('active');
});
    • Cela permettra également de déclencher à long cliquez sur et cliquez sur, faites glisser le doigt hors
    InformationsquelleAutor Ansyori
  2. 3

    La :target-pseudo-sélecteur est faite pour ce type de situations: http://reference.sitepoint.com/css/pseudoclass-target

    Il est pris en charge par tous les navigateurs modernes. Pour obtenir certaines versions IE pour le comprendre, vous pouvez utiliser quelque chose comme Selectivizr

    Voici un onglet exemple avec :target-pseudo-sélecteur.

    InformationsquelleAutor mqchen
  3. 2

    Vous pouvez utiliser un peu de Javascript pour ajouter et supprimer des classes CSS de votre navitems. Pour commencer, créez une classe CSS que vous souhaitez appliquer à l'élément actif, le nom c'est à dire: ".activeItem". Ensuite, placez une fonction javascript pour chacun de vos boutons de navigation' événement onclick qui va ajouter "activeItem" classe à l'activa, et de retirer de l'autres...

    Il devrait ressembler à quelque chose comme ceci: (non testé!)

    /*In your stylesheet*/
.activeItem{
   background-color:#999; /*make some difference for the active item here */
}


/*In your javascript*/
var prevItem = null;
function activateItem(t){
   if(prevItem != null){
      prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
   }
   t.className += " activeItem";
   prevItem = t;
}

<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
    InformationsquelleAutor Abdullah Battal
  4. 0

    J'AI TOUT COMPRIS. SIMPLE, EFFICACE PAS de jQUERY

    Nous allons à l'aide d'une case caché.

    Cet exemple inclut un "clic - off cliquez sur hover /actif "état"

    --

    Pour rendre le contenu lui-même cliquable:

    HTML

    <input type="checkbox" id="activate-div">
  <label for="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>
  </label>

    CSS

    #activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}

    Pour faire des boutons de changement de contenu:

    HTML

    <input type="checkbox" id="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>

<label for="activate-div">
   //MY BUTTON STUFF
</label>

    CSS

    #activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

    Espère que cela aide!!

    InformationsquelleAutor Aaron Fitch
  5. -2

    Si vous voulez garder vos liens pour regardez comme ils sont :active classe, vous devez définir :visited classe de même que :active donc si vous avez un liens dans .example alors vous faites quelque chose comme ceci:

    a.example:active, a.example:visited {
/* Put your active state style code here */ }

    La Lien visité Pseudo Classe est utilisé pour sélectionner les liens visités comme le dit le nom.

    InformationsquelleAutor