Bootstrap 5 选项卡导航在 Firefox 和 Internet Explorer 中不起作用答案

【问题标题】：Bootstrap 5 tab nav not working in firefox and internet explorerBootstrap 5 选项卡导航在 Firefox 和 Internet Explorer 中不起作用
【发布时间】：2021-09-19 23:51:55
【问题描述】：

我正在使用 Bootstrap 5 导航选项卡，但选项卡在 Firefox 版本 89.0.2 和 Internet Explorer 11+ 上没有更改。控制台中没有错误。

cdn js：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

html:

<nav>
    <div class="nav nav-tabs" id="dvtabs" role="tablist">
        <button class="nav-link active" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="true">C</button>
        <button class="nav-link" id="nav-associate-tab" data-bs-toggle="tab" data-bs-target="#nav-associate" type="button" role="tab" aria-controls="nav-associate" aria-selected="false">A</button>
    </div>
</nav>

<div class="tab-content" id="dvtabcontent">
    <div class="tab-pane fade show active" id="nav-contact" role="tabpanel" aria- labelledby="nav-contact-tab"></div>
    <div class="tab-pane fade" id="nav-associate" role="tabpanel" aria- labelledby="nav-associate-tab"></div>
</div>

【问题讨论】：

看看 - coliff.github.io/bootstrap-ie11。此外，您没有将结束的
放在的前面。这里 - i.ibb.co/pLbkYnf/image.png.

@s.kuznetsov 感谢您提供的解决方案，因为它不再受支持，所以 IE 并没有那么严重。并且 div 已关闭，我不确定您为什么会这样看。对 Firefox 有帮助吗？

你的第一个代码在这里 - i.ibb.co/bs2yBJv/image.png

标签： html jquery firefox internet-explorer-7 bootstrap-5

【解决方案1】：

经过简单测试，发现在FireFox中可以正常工作（参考jquery 3.6.0和bootstrap.css/js 5.0.1）。我不确定你是否引用了 jquery 和 bootstrap.css。但它在 IE11 中不起作用。根据控制台的错误信息，我认为问题的原因是IE不支持箭头功能。

如果你需要使用bootstrap来实现这样的功能，我推荐你使用bootstrap4。经测试，使用bootstrap4在IE11下可以正常工作。

简单测试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <button class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-home" aria-selected="true">C</button>
            <button class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-associate" role="tab" aria-controls="nav-profile" aria-selected="false">A</button>
        </div>
    </nav>
    <div class="tab-content" id="dvtabcontent">
        <div class="tab-pane fade show active" id="nav-contact" role="tabpanel" aria- labelledby="nav-contact-tab">panel C</div>
        <div class="tab-pane fade" id="nav-associate" role="tabpanel" aria- labelledby="nav-associate-tab">panel A</div>
    </div>
</body>
</html>

【讨论】：

请问您是否有机会检查我的答案？如果您有任何其他问题，我很乐意为您提供帮助。