bs-nav

V4 版本

<ul class="nav nav-pills mb-3">
  <li class="nav-item">
	<a class="nav-link active" data-toggle="pill" href="#pills-home">Home</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" data-toggle="pill" href="#pills-profile">Profile</a>
  </li>
  <li class="nav-item">
	<a class="nav-link"  data-toggle="pill" href="#pills-contact">Contact</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="pills-home">1</div>
  <div class="tab-pane fade" id="pills-profile">22</div>
  <div class="tab-pane fade" id="pills-contact">333</div>
</div>

注意❗

V4 版本需要注意 active 的元素不能和 nav-item 在同一级，否则激活后无法取消。href 也可以使用 data-toggle 进行替代。

扩展阅读

• 可切换标签 （tab.js）