html - div中的背景变化

Question

我希望在单击 div 后保持背景颜色。

此 div 链接到另一个 div。

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

这是我点击的 div 的 CSS

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

所以我希望背景颜色在点击时保持不变。

Answer 1

为了保持你想要的状态，我建议使用一些 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 样式可以使背景为您保留。

编辑/注意：

Ravi 的答案更好，因为它不使用 javascript。如果您保持 HTML 布局不变，则 CSS 声明必须是：

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

此外，只要浏览器记住链接已被访问，这种方式就会使样式保持不变（用户在 3 天后回来，背景颜色可能仍然保持不变）。一旦用户刷新或离开页面，我上面的方式就不会保留背景。我想这取决于你要做什么。

Answer 2

我认为您要实现的是正常的链接行为，即它会改变颜色并保持这种状态以表明它已经被访问过。如果是，那么您在 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;
}

同样，添加您需要的其他链接状态。