Bootstrap 5 tab nav not working in firefox and internet explorer

1.3k Views Asked by A.Mac At 09 July 2021 at 16:08

I am using Bootstrap 5 nav tabs but the tabs are not changing on Firefox version 89.0.2 and internet explorer 11+. There are no errors in the console.

cdn js:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Original Q&A

There are 1 best solutions below

Xudong Peng On 12 July 2021 at 07:55

After a simple test, I found that it can work correctly in FireFox (referenced jquery 3.6.0 and bootstrap.css/js 5.0.1). I am not sure if you have referenced jquery and bootstrap.css. But it does not work in IE11. According to the error message in the console, I think the cause of the problem is that IE does not support arrow functions.

If you need to use bootstrap to achieve such a function, I recommend you to use bootstrap4. After testing, it can work correctly in IE11 using bootstrap4.

Simple test：

<!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>

Bootstrap 5 tab nav not working in firefox and internet explorer

There are 1 best solutions below

Related Questions in HTML

Related Questions in JQUERY

Related Questions in FIREFOX

Related Questions in INTERNET-EXPLORER-7

Related Questions in BOOTSTRAP-5

Trending Questions

Popular # Hahtags

Popular Questions