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.
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');
});
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.
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>
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!!