Bootstrap 5 Tab导航功能失效，请问遗漏了什么配置？

问题1：缺少Bootstrap JavaScript文件 #

Bootstrap 5的标签页交互功能依赖其官方JavaScript库，你当前只引入了Bootstrap的CSS样式文件，没有添加对应的JS文件。这是标签页无法切换的核心原因。

需要在jQuery之后引入Bootstrap的JS文件（推荐引入包含Popper的bundle版本，Bootstrap 5的组件依赖Popper实现弹窗、下拉等交互）：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

问题2：aria-labelledby属性不匹配 #

你的标签面板（.tab-pane）的aria-labelledby属性值，和对应标签按钮的id不匹配，这会影响无障碍访问，也可能导致组件识别异常：

• 第一个标签按钮的id是excel-tab1，但对应面板的aria-labelledby写的是excel1
• 第二个标签按钮的id是excel-tab2，对应面板的aria-labelledby写的是excel2

修改后正确的面板代码：

<div class="tab-pane fade show active" id="excel1" role="tabpanel" aria-labelledby="excel-tab1">

<div class="tab-pane fade" id="excel2" role="tabpanel" aria-labelledby="excel-tab2">

修复后的完整代码示例 #

<html>
    <head>
        <title>Excel Viewer</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
    </head>
    <body>
        <div class="container">
            <br>
            <ul class="nav nav-tabs" id="fileTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="excel-tab1" data-bs-toggle="tab" data-bs-target="#excel1" type="button" role="tab" aria-controls="excel1" aria-selected="true">9. Defined Data Objects.xlsx</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="excel-tab2" data-bs-toggle="tab" data-bs-target="#excel2" type="button" role="tab" aria-controls="excel2" aria-selected="false">9. Defined Data Objects_2.xlsx</button>
                </li>
            </ul>
            <div class="tab-content" id="tabContent">
                <div class="tab-pane fade show active" id="excel1" role="tabpanel" aria-labelledby="excel-tab1">
                    <br>
                    <table border="1" class="dataframe table table-striped table-bordered table-hover" id="data1">
                        <thead>
                            <tr style="text-align: right;">
                                <th>Name</th>
                                <th>Data Attribute</th>
                                <th>Default Expression</th>
                                <th>Override Expression</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>ACCT_AMT_AVLBL_AFTR_PRCG_NMRC</td>
                                <td>decimal128(18, 0)</td>
                                <td>pydecimal(left_digits=18,right_digits=0)</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                </div>
                <div class="tab-pane fade" id="excel2" role="tabpanel" aria-labelledby="excel-tab2">
                    <br>
                    <table border="1" class="dataframe table table-striped table-bordered table-hover" id="data2">
                        <thead>
                            <tr style="text-align: right;">
                                <th>Name</th>
                                <th>Data Attribute</th>
                                <th>Default Expression</th>
                                <th>Override Expression</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>ACCT_AMT_AVLBL_AFTR_PRCG_NMRC</td>
                                <td>decimal128(18, 0)</td>
                                <td>pydecimal(left_digits=18,right_digits=0)</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                </div>
            </div>
            <br>
        </div>
        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <!-- 新增Bootstrap JS文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
        <script>
            $(document).ready(function () {
                for (let i = 1; i <= 2; i++) {
                    $(`#data` + i).DataTable();
                }
            });
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者lapots