div中的背景更改

Question

我想在點擊div後留下背景色。

這個div鏈接到另一個目標div。

<a href="#aboutbody"><div class="barbutton">ABOUT</div></a> 

這裏是div的CSS我點擊

.barbutton:hover { 
    background-color: #7BDFBE; 
} 

所以我想的背景顏色保持它的點擊時。

Answer 1

我認爲你試圖達到的是正常的鏈接行爲，即它改變顏色並保持這種方式來表明它已被訪問。如果是，那麼你在CSS中以錯誤的方式處理問題。

將CSS放在<a>標籤內的新DIV上，而不是將CSS放在鏈接本身上。

<a class="barbutton" href="#aboutbody">ABOUT</a> 

然後使用鏈路狀態在如下CSS：

a.barbutton:visited { 
    background-color: #7BDFBE; 
} 

a.barbutton:hover { 
    background-color: #7BDFBE; 
} 

同樣，添加等環節規定您需要。

Answer 2

爲了保持你想要的狀態，我會建議使用一些javascript/jQuery。

的Javascript：

<a href="#aboutbody"><div id="barbuttonid" class="barbutton">ABOUT</div></a> 

<script type="text/javascript"> 
    document.getElementById("barbuttonid").onclick = function() { 
      document.getElementById("barbuttonid").className += " clicked"; 
     }; 
</script> 

的jQuery：

<a href="#aboutbody"><div class="barbutton">ABOUT</div></a> 

<script type="text/javascript"> 
    jQuery('.barbutton').click(function() { jQuery(this).addClass('clicked'); }); 
</script> 

CSS：

/* anchor tags are inline and cannot contain blocks elements like divs */ 
#aboutbody { 
    display: inline-block; 
} 

.barbutton:hover { 
    background-color: #7BDFBE; 
} 

.barbutton.clicked { 
    background-color: #7BDFBE; 
} 

現在被點擊時，額外的類將需要添加的CSS樣式可以使背景持續存​​在。

編輯/注：

拉維的回答是更好，因爲它不使用JavaScript。如果你不停的HTML佈局，你擁有了它，在CSS聲明必須是：

a:hover .barbutton {...} 
a:vistied .barbutton {...} 

而且，這種方式將使風格堅持只要在瀏覽器記住該鏈接已被訪問（用戶來早在3天后，背景顏色可能仍然存在）。我上面的方式不會保持用戶刷新或離開頁面後的背景。我想這取決於你要做什麼。