单击href链接时如何使用css控件聚焦div背景

Question

我试图将:focus放在div上，这样当点击href链接时它会聚焦其他颜色，是否可能？任何帮助，将不胜感激。

以下是我目前的进展

eg: Fiddle Demo


预期结果，当点击href链接时，它将专注于div背景（如悬停做）。

我不知道如何将其转换为javascript

 $("#colOne ul li").click(function(){
 $("#colOne ul li").removeClass("active");
 $(this).addClass("active")
 })

Answer 1

您需要li动作，因此您需要使用Either Jquery或Javascript。
使用以下JavaScript将解决您的问题。

HTML：

<div id="colOne">
    <h3>Fruit</h3>
    <div class="bg1">
        <ul>
            <li class="litest"><a href="" target="entryFrame">Apple</a></li>
            <li class="litest"><a href="" target="entryFrame">Orange</a></li>
            <li class="litest"><a href=""  target="entryFrame">Banana</a></li>
        </ul>
        </div>
</div>

使用Javascript：

<script language="javascript">
var buttons = document.getElementsByClassName("litest");

for(var i = 0; i < buttons.length; ++i){

    buttons[i].onmousedown = function() {
        this.setAttribute("class", "active");
    }
}
</script>

您可以使用this.classList.toggle('active');代替this.setAttribute("class", "active");来添加和删除效果。

检查Fiddle。

如果您想使用JQuery，请使用以下JQuery代码：

$(function(){
    $("li").bind("click", function(){
         $(this).addClass('active');
    });
});

修改

在这里，我按照你的要求编辑了我的小提琴。

检查Fiddle.

Answer 2

听起来你想要一个事件监听器，而不是一个：focus伪类。如果您设置了几个类来反映您想要的颜色，您可以在点击时切换它们。我建议jQuery's toggleClass完成这项工作。