如何通过按钮切换Bootstrap的导航面板

前端开发 2026-07-10

我已经成功实现了一个在小屏幕上可折叠的选项卡设计。

在其中一个面板中，我想放置一个按钮，用来切换到另一个面板。

我尝试了很多解决方案，但大多在控制台出现以下错误后就失败了：

Uncaught TypeError: 'querySelectorAll' called on an object that does not implement interface Element.
    find selector-engine.js:16
    _getChildren tab.js:170
    _getActiveElem tab.js:174
    show tab.js:85
    <anonymous> tab.js:288
    n event-handler.js:118
    D event-handler.js:184
    on event-handler.js:217
    <anonymous> tab.js:279
    <anonymous> bootstrap.bundle.min.js:6
    <anonymous> bootstrap.bundle.min.js:6

我正在使用以下按钮代码：

<button id="btn2" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-contact-tab" onclick="showTab()">Button</button>

以及脚本：

<script> 
        function showTab() {
            var tabElement = document.getElementById('#nav-volunteers')
            console.log(tabElement)
            tabElement.show() 
        }
    </script>

我当前可正常工作的选项卡面板如下：

<nav class="navbar navbar-expand-sm" style="padding:0;">  
        <div class="nav nav-tabs row-fluid collapse navbar-collapse" id="nav-tab" role="tablist">
            <button class="nav-link active col-lg" id="nav-about-tab" data-bs-toggle="tab" data-bs-target="#nav-about" type="button" role="tab" aria-controls="nav-about" aria-selected="false" style="font-size:20px;background-color:#7676FD;color:white;font-weight:700">About</button>
            <button class="nav-link col-lg" id="nav-voluteers-tab" data-bs-toggle="tab" data-bs-target="#nav-volunteers" type="button" role="tab" aria-controls="nav-volunteers" aria-selected="true" style="font-size:20px;background-color:#FC9D9D;color:white;font-weight:700">Volunteering</button>
            <button class="nav-link col-lg" id="nav-faq-tab" data-bs-toggle="tab" data-bs-target="#nav-faq" type="button" role="tab" aria-controls="nav-faq" aria-selected="false" style="font-size:20px;background-color:#52FC52;color:white;font-weight:700">FAQ</button>
            <button class="nav-link col-lg" id="nav-impact-tab" data-bs-toggle="tab" data-bs-target="#nav-impact" type="button" role="tab" aria-controls="nav-impact" aria-selected="false" style="font-size:20px;background-color:#8151A7;color:white;font-weight:700">Our impact</button>
            <button class="nav-link col-lg" id="nav-donations-tab" data-bs-toggle="tab" data-bs-target="#nav-donations" type="button" role="tab" aria-controls="nav-donations" aria-selected="false" style="font-size:20px;background-color:#AE8846;color:white;font-weight:700">Donations</button>
            <button class="nav-link col-lg" id="nav-clients-tab" data-bs-toggle="tab" data-bs-target="#nav-clients" type="button" role="tab" aria-controls="nav-clients" aria-selected="false" style="font-size:20px;background-color:#FF7D1A;color:white;font-weight:700">Clients</button>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab" tabindex="0" style="background-color:#7676FD">
        <?php echo view('tab_about') ?>
        </div>
        <div class="tab-pane fade" id="nav-volunteers" role="tabpanel" aria-labelledby="nav-volunteers-tab" tabindex="0" style="background-color:#FC9D9D">
        <?php echo view('tab_volunteers') ?>
        </div>
        <div class="tab-pane fade" id="nav-faq" role="tabpanel" aria-labelledby="nav-faq-tab" tabindex="0" style="background-color:#52FC52">
        <?php echo view('tab_faq') ?>
        </div>
        <div class="tab-pane fade" id="nav-impact" role="tabpanel" aria-labelledby="nav-impact-tab" tabindex="0" style="background-color:#8151A7">
        <?php echo view('tab_impact') ?>
        </div>
        <div class="tab-pane fade" id="nav-donations" role="tabpanel" aria-labelledby="nav-donations-tab" tabindex="0" style="background-color:#AE8846">
        <?php echo view('tab_donations') ?>
        </div>
        <div class="tab-pane fade" id="nav-clients" role="tabpanel" aria-labelledby="nav-clients-tab" tabindex="0" style="background-color:#FF7D1A">
        <?php echo view('tab_clients') ?>
        </div>
    </div>

请问有人能指出我的错误，或者就此给出是否可行的建议吗？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <button id="btn2" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-contact-tab" onclick="showTab()">Button</button>

<script> 
        function showTab() {
            var tabElement = document.getElementById('#nav-volunteers')
            console.log(tabElement)
            tabElement.show() 
        }
    </script>


    <nav class="navbar navbar-expand-sm" style="padding:0;">  
            <div class="nav nav-tabs row-fluid collapse navbar-collapse" id="nav-tab" role="tablist">
                <button class="nav-link active col-lg" id="nav-about-tab" data-bs-toggle="tab" data-bs-target="#nav-about" type="button" role="tab" aria-controls="nav-about" aria-selected="false" style="font-size:20px;background-color:#7676FD;color:white;font-weight:700">About</button>
                <button class="nav-link col-lg" id="nav-voluteers-tab" data-bs-toggle="tab" data-bs-target="#nav-volunteers" type="button" role="tab" aria-controls="nav-volunteers" aria-selected="true" style="font-size:20px;background-color:#FC9D9D;color:white;font-weight:700">Volunteering</button>
                <button class="nav-link col-lg" id="nav-faq-tab" data-bs-toggle="tab" data-bs-target="#nav-faq" type="button" role="tab" aria-controls="nav-faq" aria-selected="false" style="font-size:20px;background-color:#52FC52;color:white;font-weight:700">FAQ</button>
                <button class="nav-link col-lg" id="nav-impact-tab" data-bs-toggle="tab" data-bs-target="#nav-impact" type="button" role="tab" aria-controls="nav-impact" aria-selected="false" style="font-size:20px;background-color:#8151A7;color:white;font-weight:700">Our impact</button>
                <button class="nav-link col-lg" id="nav-donations-tab" data-bs-toggle="tab" data-bs-target="#nav-donations" type="button" role="tab" aria-controls="nav-donations" aria-selected="false" style="font-size:20px;background-color:#AE8846;color:white;font-weight:700">Donations</button>
                <button class="nav-link col-lg" id="nav-clients-tab" data-bs-toggle="tab" data-bs-target="#nav-clients" type="button" role="tab" aria-controls="nav-clients" aria-selected="false" style="font-size:20px;background-color:#FF7D1A;color:white;font-weight:700">Clients</button>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab" tabindex="0" style="background-color:#7676FD">
            ?php echo view('tab_about') ?>
            </div>
            <div class="tab-pane fade" id="nav-volunteers" role="tabpanel" aria-labelledby="nav-volunteers-tab" tabindex="0" style="background-color:#FC9D9D">
            ?php echo view('tab_volunteers') ?>
            </div>
            <div class="tab-pane fade" id="nav-faq" role="tabpanel" aria-labelledby="nav-faq-tab" tabindex="0" style="background-color:#52FC52">
            ?php echo view('tab_faq') ?>
            </div>
            <div class="tab-pane fade" id="nav-impact" role="tabpanel" aria-labelledby="nav-impact-tab" tabindex="0" style="background-color:#8151A7">
            ?php echo view('tab_impact') ?>
            </div>
            <div class="tab-pane fade" id="nav-donations" role="tabpanel" aria-labelledby="nav-donations-tab" tabindex="0" style="background-color:#AE8846">
            ?php echo view('tab_donations') ?>
            </div>
            <div class="tab-pane fade" id="nav-clients" role="tabpanel" aria-labelledby="nav-clients-tab" tabindex="0" style="background-color:#FF7D1A">
            ?php echo view('tab_clients') ?>
            </div>
        </div>

解决方案

如前所述，有几个问题

错误的用法 document.getElementById('#nav-volunteers') #getElementById must NOT include #
语法无效 - tabElement.show(); # .show() is not a native DOM method
拼写错误 id="nav-volunteers" != id="nav-voluteers-tab"

请使用下列代码

function showTab() {
    var tabTrigger = document.querySelector('#nav-voluteers-tab'); # button id

    var tab = new bootstrap.Tab(tabTrigger);
    tab.show();
}

并修正HTML id="nav-voluteers-tab"

同时请记住以下几点