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

Question

Im trying to put :focus on div so it will focus with other colors when href link is clicked, is it possible ?? Any help would be appreciated.

Below are my current progress

eg: Fiddle Demo


Expected result, when click on the href link, it will focus on the div background (like hover do).

i have no idea how to convert this to javascript

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

Answer 1

You need li action so you need to use Either Jquery or Javascript.
Use following JavaScript will solve your issue.

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>

You can use this.classList.toggle('active'); instead of this.setAttribute("class", "active"); to add and remove effect.

Check Fiddle.

If you like to use JQuery use following JQuery code:

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

Edit:

Here i edited my fiddle as per your requirement.

Check Fiddle.