Javascript 正在寻找跨浏览器解决方案以突出显示选项卡

我正在寻找一个跨浏览器兼容的解决方案来突出显示选项卡。页面加载时，第一个选项卡应高亮显示，单击其他选项卡时，第一个选项卡将取消高亮显示，选定的选项卡将高亮显示。在IE和Firefox中无法同时以相同的方式使用此功能。有什么意见吗

注意：下面的代码可以工作，但当我单击页面上的任何其他链接时，选项卡上的焦点将丢失，因此当前选择的选项卡不会突出显示

JS

HTML

在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
    });
});

---

最后，这是跨浏览器工作的代码。我必须将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>

---

感谢您的关注！但是由于使用了.focus，当我在选项卡区域外单击时，没有一个选项卡保持高亮显示。我希望最后一个选中的选项卡被选中，直到我点击另一个选项卡。啊，好的，那么你可以使用你自己的类并在a上切换它，看看这个小提琴：JSFIDLE链接工作得非常好。它在我的网站上的Firefox中也能正常工作，不幸的是在IE中，当我在标签外单击时，最后选择的标签会失去焦点，仍在试图弄清楚这一点。如果这不起作用，我可能不得不寻找一种完全不同的方法。你是否像我在小提琴中一样使用自己的类，而不是主动？试试看，是的，我和你一样在用我自己的课。当我通过IE web developer观察时，我发现我的类没有被添加到锚链接中。相反，在IE中，由于激活“focusmeplease”功能，我的选项卡会高亮显示，因此当我单击外部时，它会失去焦点。另一方面，在FF中，类被添加到锚标记中，并且它可以工作。IE中的奇怪行为。我想知道锚标记href中的javascript:void0是否导致了IE中的这种奇怪行为。

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

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>