ищет кросс-браузерное решение для выделения вкладок

Question

Я ищу кросс-браузерное решение для выделения вкладок. При загрузке страницы первая вкладка должна выделяться и нажимать на другие вкладки, первая вкладка будет отображаться без выделения, и выбранная вкладка будет выделяться. Невозможно заставить эту функциональность работать одинаково в IE и Firefox одновременно. Какие-либо входы по этому поводу?

Примечание: приведенный ниже код работает, но когда я нажимаю на любую другую ссылку на странице, фокус на вкладках теряется, и поэтому выбранная вкладка не выделяется.

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

В вашем click случае, просто вызовите метод focus. Как так:

$(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 
    }); 
}); 

Смотрите эту скрипку HERE

Answer 2

Наконец это код, который работает во всех браузерах. Мне пришлось переместить функцию addPlayer из действия onClick тега привязки в функцию jQuery li click.

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>