html - 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>
祝你好运
推荐阅读
- python - 如何在使用 Python 下载之前对气候数据进行子集化?
- asp.net - 如何将 ASP.Net 5(核心)授权属性重定向到 401
- python - 如果 len(row) == 2 (python, csv) 添加行
- python-3.x - 使用 Fernet 创建自定义 Django 加密字段
- matlab - 我可以使用带有积分动作和状态反馈的 Acker 函数吗
- javascript - 对从异步函数返回的承诺感到非常困惑
- reactjs - 我无法使用 DRF 和 REACT 从 RESTful API 获取数据
- javascript - Stripe api 中的 stringify 超出了最大调用堆栈大小
- python - ModuleNotFoundError:没有名为“tabpy”的模块
- typo3 - 在 TYPO3 10 中编辑 tx:cart 的订单确认电子邮件模板