如何解决Bootstrap 导航药丸无法正常工作
我正在使用一个主导航菜单,然后使用第二个导航菜单,所有这些的内容都在同一个 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>
解决方法
在 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>
祝你好运
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。