0

我正在使用一个主导航菜单，然后是第二个导航菜单，所有这些的内容都在同一个 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>
4

1 回答 1

1

在 BS4 中，当将 ACTIVE 类添加到按钮时，按钮将变为活动状态。在导航标签内，默认情况下会激活“配置文件”按钮，当您按下“测试”按钮时，“配置文件”按钮会关闭，将 ACTIVE 类分配给测试。通过这种方式，您可以每次显示哪个菜单处于活动状态。

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

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

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

代码可能如下

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

祝你好运

于 2021-03-14T00:48:52.967 回答