<!--使用.nav-tabs类可将将导航转换为选项卡
如果要设置选项卡动态可切换,可以在每个链接上添加data-toggle="tab"属性,然后在每个选项对应的内容上添加.tab-pane类
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" data-toggle="tab">内容</a>
</li>
</ul> -->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>选项卡导航</h1>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#one">选项卡1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#two">选项卡2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#three">选项卡3</a>
</li>
</ul>
<!--选项卡对应的内容-->
<div class="tab-content">
<div class="tab-pane" id="one">
选项卡1对应的内容: Lorem </div>
<div class="tab-pane active" id="two">
选项卡2对应的内容:Lorem </div>
<div class="tab-pane" id="three">
选项卡3对应的内容:Lorem </div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>