单击 href link 时如何使用 css 控件将焦点放在 div 背景上

Question

我正在尝试将 :focus 放在 div 上，以便在单击 href link 时它会聚焦于其他颜色，这可能吗？任何帮助，将不胜感激。

以下是我目前的进度

eg: Fiddle Demo

预期结果，当单击 href link 时，它将聚焦在 div 背景上（就像悬停一样）。

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

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

Answer 1

听起来您想在 li 上使用事件侦听器，而不是 :focus 伪 class。如果您设置了一对 classes 来反映您想要的颜色，您只需单击即可在它们之间切换。我建议 jQuery's toggleClass 完成这项工作。

Answer 2

您需要执行 li 操作，因此您需要使用 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。

勾选Fiddle.

单击 href link 时如何使用 css 控件将焦点放在 div 背景上

How to use css control to focus on div background when href link clicked

html

css

href