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函数从anchor标记的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>

寻找跨浏览器解决方案以突出显示标签

2 个答案: