Question

I’m looking for a cross browser compatible solution to highlight tabs. On page load the first tab should highlight and on click of the other tabs, the first tab would unhighlight and the selected tab would highlight. Can’t get this functionality working in same fashion in IE and Firefox at the same time. Any inputs on that?

Note: The below code works but when I click on any other link on the page, the focus on the tabs is lost and hence the currently selected tab is not highlighted.

JS

$(document).ready(function () {
    activate('focusmeplease');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
    });
});

function activate(link) {
    if (document.getElementById) document.getElementById(link).focus();
    else if (document.all) document.all(link).focus();
}

HTML

<div id="tabs">
    <ul>
        <li class="clas" onclick="javascript: addPlayer('tab-1','1649028604001');">
            <a href="javascript:void(0);" id="focusmeplease">First tab</a>
        </li>
        <li class="clas" onclick="javascript: addPlayer('tab-1','1651558610001');">
            <a href="javascript:void(0);">Second tab</a>
        </li>
    </ul>
    <div id="tab-1"></div>
</div>

Answer 1

In your click event, just call the focus method. Like so:

    $(document).ready(function () {
    activate('focusmeplease');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        $(this).focus(); //i've added this
    });
});

See this Fiddle HERE