引导导航药丸不能正常工作

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类被添加到按钮中时，按钮变得活动。在nav标签内，"profile"按钮默认是激活的，当你按下"按钮,"profile"按钮关闭，将ACTIVE类分配给测试。通过这种方式，您可以显示每次活动的菜单。

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

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

我给你留下一个例子，当按下"关机"按钮时javascript被激活，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>

好运