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

Answer 1

结合JS＆amp; 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 2

:target - 伪选择器适用于以下类型的情况：http://reference.sitepoint.com/css/pseudoclass-target

所有现代浏览器都支持它。要使某些IE版本能够理解它，您可以使用类似Selectivizr

的内容

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

Answer 3

您可以使用一些Javascript来添加和删除navitems的CSS类。对于初学者，创建一个您将要应用于活动元素的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

我把它弄清楚了。简单，有效 NO JQUERY

我们将使用隐藏的复选框此示例包含一个关于点击关闭＆＃39;悬停/活动＆＃39;状态＆＃34;

-

使内容本身可以点击：

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

希望它有所帮助!!

Answer 5

如果您希望保持链接看起来像:active类，则应将:visited类定义为与:active相同，以便在.example中有链接然后你做这样的事情：

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

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

如何保持：单击元素后的活动css样式

5 个答案: