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

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

<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 в активном состоянии один раз после щелчка, пока я не нажму на другой элемент навигационной панели, и как это сделать?

Ответы

Ответ 1

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

Ответ 2

Сегмент :target -pseudo создан для таких ситуаций: http://reference.sitepoint.com/css/pseudoclass-target

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

Вот пример вкладки с :target -pseudo selector.

Ответ 3

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

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

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

Ответ 4

Я НАПИСАЛ. ПРОСТОЙ, ЭФФЕКТИВНЫЙ 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}

Надеюсь, что это поможет!

Ответ 5

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

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

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