1

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>
4

2 回答 2

0

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

于 2012-05-24T14:00:34.247 回答
0

Finally this is the code that worked across browsers. I had to move the addPlayer function from the onClick action of the anchor tag to within the jQuery li click function.

jQuery(document).ready(function(){                  
                     addPlayer('tab-1', '1649028596001');//on page load, display this.
                     jQuery('#tabs ul li:first').addClass('active');
                     jQuery('#tabs ul li').click(function () {
                              addPlayer('tab-1', playerIdArray[jQuery(this).index()]);
                              jQuery('#tabs ul li').removeClass("active");
                              jQuery(this).addClass("active");
                      });

});


<ul>

     <li class="class4" ><a href="javascript:void(0);">Bond</a></li>
     <li class="class5" ><a href="javascript:void(0);">Stock</a></li>
   </ul>
   <div id="tab-1">

   </div>
于 2012-05-29T17:04:43.773 回答