focussing Element

by icoxfog417

HTML

<div id="myList" style="position:relative">
    <div id="c1" class="button" style="left:10px;top:5px;">Cell 1</div>
    <div id="c2" class="button" style="left:10px;top:40px;">Cell 2</div>
    <div id="c3" class="button" style="left:10px;top:75px;">Cell 3</div>
</div>

CSS

.button{
    border:1px solid silver;
    padding:5px;
    position:absolute;
    width:150px;
    height:20px;
}
.button.active{
    border:1px solid blue;    
}

JavaScript

$(function(){
    
    $("#myList").click(function(e){
        var msg = "";
        var activeEl = document.activeElement;
        var focusEl = $(":focus");

        var active = (activeEl.id != "")?activeEl.id:activeEl.tagName;
        
        $(".active").removeClass("active");
        $(e.target).addClass("active");
        
        msg += "event from " + $(e.target).attr("id") + ". " ;
        msg += "activeElement is '"+ active +"',";
        
        if(focusEl.length > 0){
            var focus  = focusEl.attr("id");
            msg += "focus is on '" + focus + "'.";
        }else{
            msg += "focus is nowhere.";
        }
        alert(msg);
    })
    
})