单击元素后如何保持：active css样式答案

【问题标题】：How to keep :active css style after clicking an element单击元素后如何保持：active css样式
【发布时间】：2011-12-05 23:55:25
【问题描述】：

我使用锚点作为我的网站导航。

<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 元素样式保持在 :active 状态，直到我点击另一个导航栏项目，那么该怎么做呢？

【问题讨论】：

第一件事永远不要将块元素放在内联元素中是一个坏标记。 DIV 是块元素 & 在内联元素中

标签： css hyperlink

【解决方案1】：

如果你想让你的链接看起来像:active类，你应该定义:visited类和:active一样，所以如果你在.example中有一个链接，那么你可以这样做：

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

Link visited Pseudo Class 用于选择访问过的链接，如名称所示。

【讨论】：

【解决方案2】：

:target-pseudo 选择器适用于这些类型的情况：http://reference.sitepoint.com/css/pseudoclass-target

所有现代浏览器都支持它。要让一些 IE 版本理解它，您可以使用 Selectivizr

Here is a tab example 和 :target-伪选择器。

【讨论】：

【解决方案3】：

您可以使用一点 Javascript 来添加和删除您的导航项的 CSS 类。对于初学者，创建一个您将应用于活动元素的 CSS 类，将其命名为：“.activeItem”。然后，为每个导航按钮的 onclick 事件添加一个 javascript 函数，该事件将向激活的那个添加“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>

【讨论】：

【解决方案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');
});

【讨论】：

这也会触发长按点击，滑动关闭

【解决方案5】：

我想通了。简单、有效无 jQUERY

我们将使用一个隐藏的复选框。
这个例子包括一个“on click - off click 'hover / active' 状态”

--

使内容本身可点击：

#activate-div{display:none}

.my-div{background-color:#FFF}

#activate-div:checked ~ label
.my-div{background-color:#000}

<input type="checkbox" id="activate-div">
<label for="activate-div">
  <div class="my-div">
    //MY DIV CONTENT
  </div>
</label>

要让按钮改变内容：

#activate-div{display:none}

.my-div{background-color:#FFF}

#activate-div:checked +
.my-div{background-color:#000}

<input type="checkbox" id="activate-div">
<div class="my-div">
  //MY DIV CONTENT
</div>

<label for="activate-div">
  //MY BUTTON STUFF
</label>

希望对你有帮助！

【讨论】：