如何保持：單擊元素後的活動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用於選擇訪問的鏈接作爲名稱。 http://reference.sitepoint.com/css/pseudoclass-target

它是由所有現代瀏覽器都支持：

Answer 2

的:target - 僞選擇爲這些類型的情況下取得。要獲得一些IE版本瞭解它，你可以使用像Selectivizr

Here is a tab example與:target -pseudo選擇器。

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

結合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} 

希望它可以幫助！