Come mantenere: stile css attivo dopo aver cliccato su un elemento

Question

Uso l'ancora come navigazione del mio sito.

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

Il 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; 
} 

Mi chiedo come mantenere lo stile elemento div tenere in: stato attivo una volta dopo lo scatto fino a quando ho colpito un altro elemento barra di navigazione, così come farlo ?

Answer 1

Se si desidera mantenere i collegamenti a guardare come sono :active di classe, è necessario definire :visited classe stessa :active quindi se avete un link a .example poi si fa qualcosa di simile:

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

Il Link visited Pseudo Class viene utilizzato per selezionare i collegamenti visitati come dice il nome.

Answer 2

Il selettore :target Pseudo è fatto per questo tipo di situazioni: http://reference.sitepoint.com/css/pseudoclass-target

E 'supportato da tutti i browser moderni. Per ottenere alcune versioni di IE per capirlo puoi usare qualcosa come Selectivizr

Here is a tab example con selettore :target -pseudo.

Answer 3

È possibile utilizzare un po 'di Javascript per aggiungere e rimuovere le classi CSS dei propri navigatori. Per cominciare, crea una classe CSS che applicherai all'elemento attivo, chiamatela cioè: ".activeItem". Quindi, metti una funzione javascript su ciascun evento di onclick dei pulsanti di navigazione che aggiungerà la classe "activeItem" a quella attivata e rimuoverla dagli altri ...

Dovrebbe apparire in questo modo: (non verificato !)

/*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> 

Answer 4

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

Answer 5

ho capito. SEMPLICE, EFFETTIVO NO jQUERY

Stiamo per utilizzare una casella di controllo nascosta.
Questo esempio include un "click on - Stato off clic 'hover/attivo'"

-

a rendere i contenuti in sé cliccabile:

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} 

Per rendere pulsante Contenuti:

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} 

Speranza che aiuta !!