Как сохранить: активный стиль css после нажатия элемента

Question

Я использую якорь для навигации по сайту.

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

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

Я задаюсь вопросом, как сохранить стиль DIV элемента держать в: активном состоянии сразу после щелчка, пока я не ударил другой элемент панели нав, так как сделать это ?

Answer 1

Если вы хотите, чтобы ваши ссылки, чтобы посмотреть, как они :active класс, вы должны определить :visited класс такой же, как :active, так что если у вас есть ссылки .example то сделать что-то вроде этого:

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

В Link visited Pseudo Class используется для выбора посещенных ссылок, как указано имя.

Answer 2

Селектор :target Псевдо сделан для этих типов ситуаций: http://reference.sitepoint.com/css/pseudoclass-target

Он поддерживается всеми современными браузерами. Чтобы получить некоторые версии IE, вы можете использовать что-то вроде Selectivizr

Here is a tab example с :target -pseudo selector.

Answer 3

Для добавления и удаления классов CSS ваших навигационных элементов вы можете использовать Javascript. Для начала создайте класс CSS, который вы собираетесь применить к активному элементу, назовите его: «.activeItem». Затем добавьте функцию javascript для каждого из ваших кнопок навигации onclick, которое добавит класс activeItem к активированному и удалит из других ...

Он должен выглядеть примерно так: (непроверенный !)

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

Объединить 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

Я понял. ПРОСТОЙ, ЭФФЕКТИВНЫЙ NO jQUERY

Мы собираемся использовать скрытый флажок.
Этот пример включает в себя один "на мыши - выкл нажмите кнопку 'парения/активный' состояние"

-

Чтобы сделать содержание самой кликабельны:

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} 

Для того, чтобы содержание изменения кнопки:

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} 

Надеется, что это помогает !!