寻找跨浏览器解决方案来突出显示选项卡

looking for a cross browser solution to highlight tabs

本文关键字：显示 选项 浏览器 解决方案 寻找      更新时间：2023-09-26

我正在寻找一种跨浏览器兼容的解决方案来突出显示选项卡。在页面加载时，第一个选项卡应突出显示，单击其他选项卡时，第一个选项卡将取消突出显示，所选选项卡将突出显示。无法同时在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>

在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单击函数中。

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>
相关文章：