Bootstrap 导航丸无法正常工作

Question

我正在使用一个主导航菜单，然后使用第二个导航菜单，所有这些的内容都在同一个 div.

进入页面后，Profile 默认处于活动状态，这是正确的，然后我可以输入 Test，然后按预期激活。

但是，一旦我单击 Edit，Edit 和主导航菜单中的最后一个导航项都处于活动状态。 Edit 然后保持活动状态，尽管单击 Profile 或 Test。这意味着我必须刷新页面以删除活动状态并再次查看 Edit 中的内容。

对这个结构有什么问题有什么建议吗？

<div class="container">

<!-- Second Nav-menu -->
<div class="col-lg-4">
    <div class="container-fluid">
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
                <span>Edit info</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- End of second Nav-Menu -->

<!-- Main Nav-menu -->
<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
        <a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
            <span>Profile</span></a>
    </li>
    <li class="nav-item">
        <a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
            <span>Test</span></a>
    </li>
</ul>
<!-- End of main Nav-menu -->

<!-- Tab content -->
<div class="tab-content">

    <div class="tab-pane" id="edit" name="edit">
        <div class="col-md-12">
            <h2>Edit-tab</h2>
        </div>
    </div>
    
    <div class="tab-pane active show" id="profile">
        <div class="col-md-12">
            <h3>Profile-tab</h3>    
        </div>
    </div>

    <div class="tab-pane" id="test">
        <div class="col-md-12">
            <h2>Test-tab</h2>
        </div>
    </div>
   
</div> 
<!-- Tab content end-tag -->

</div>

Answer 1

在 BS4 中，当添加 ACTIVE class 按钮时，按钮变为活动状态。在导航标签内，“配置文件”按钮默认激活，当您按下“测试”按钮时，“配置文件”按钮关闭，分配 ACTIVE class 进行测试。通过这种方式，您可以显示每次激活的菜单。

但是“编辑信息”位于另一个导航栏中，该按钮是唯一的元素。这就是为什么您无法将其关闭的原因，因为没有其他按钮可以打开和关闭前一个按钮。此操作是 BS4 中导航的典型操作，通过 javascript 代码自动完成。

要关闭 ACTIVE，您必须删除 ACTIVE class。最简单的方法是通过事件发生时激活的 javascript 来实现。

我给你举了一个例子，当按下按钮“关闭”时，javascritp 被激活并且 ACTIVE class 被消除。这可以与调用此函数的按钮或任何其他事件相关联。

代码可能如下

<div class="container">
    <!-- Second Nav-menu -->
    <div class="col-lg-4">
        <div class="container-fluid">
            <ul id="1" class="nav nav-pills nav-justified">
                <li class="nav-item">
                    <a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
                        <span>Edit info</span>
                    </a>
                </li>
            </ul>
            <a href="#" data-target="#edit" data-toggle="pill" class="nav-link apagar">
                <span>apagar</span>
            </a>
        </div>
    </div>
    <!-- End of second Nav-Menu -->
    <!-- Main Nav-menu -->
    <ul id="2" class="nav nav-pills nav-justified">
        <li class="nav-item">
            <a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
                <span>Profile</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
                <span>Test</span>
            </a>
        </li>
    </ul>
    <!-- End of main Nav-menu -->
    <!-- Tab content -->
    <div class="tab-content">
        <div class="tab-pane" id="edit" name="edit">
            <div class="col-md-12">
                <h2>Edit-tab</h2>
            </div>
        </div>
        <div class="tab-pane active show" id="profile">
            <div class="col-md-12">
                <h3>Profile-tab</h3>
            </div>
        </div>
        <div class="tab-pane" id="test">
            <div class="col-md-12">
                <h2>Test-tab</h2>
            </div>
        </div>
    </div>
    <!-- Tab content end-tag -->
</div>


<script>
    $(function() {
        $(".apagar").click(function() {
            $(".edit").removeClass('active');
        });
    });
</script>

祝你好运

Bootstrap 导航丸无法正常工作

Bootstrap Nav-pills not working correctly

html

bootstrap-4

nav

bootstrap-5

nav-pills