web-dev-qa-db-fra.com

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

J'utilise anchor comme navigation sur mon 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 demande comment conserver le style d'élément div dans l'état: actif une fois après le clic jusqu'à ce que je frappe un autre élément de la barre de navigation.

csshyperlink
19
Alpha Chung

Combinez 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');
});
15
Ansyori

Le pseudo sélecteur :target- est créé pour ce type de situation: http://reference.sitepoint.com/css/pseudoclass-target

Il est supporté par tous les navigateurs modernes. Pour comprendre certaines versions IE, vous pouvez utiliser quelque chose comme Selectivizr

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

3
mqchen

Vous pouvez utiliser un peu de Javascript pour ajouter et supprimer des classes CSS de vos navigateurs. Pour commencer, créez une classe CSS que vous allez appliquer à l'élément actif, nommez-la, par exemple: ".activeItem". Ensuite, mettez une fonction javascript sur chacun des événements onclick de vos boutons de navigation, qui va ajouter la classe "activeItem" à celle activée et les supprimer des autres ...

Cela devrait ressembler à 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>
2
Abdullah Battal

Je l'ai compris. SIMPLE, EFFICACE NO jQUERY

Nous allons utiliser une case à cocher cachée.
Cet exemple en inclut un

-

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 que le bouton change le 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}

J'espère que ça aide!!

0
Aaron Fitch