我对引导程序上的选项卡有问题：
我编写了一个页面，该页面应该是全宽/全高，导航栏将是选项卡。 我不知道为什么当我单击任何选项卡按钮时，它给我带来了一个不应该存在的奇怪过渡。
我只需要一个静态选项卡菜单，关闭任何过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
<li><a href="#tab4" data-toggle="tab">Tab4</a></li>
<li><a href="#tab5" data-toggle="tab">Tab5</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>如果您全屏查看代码段会更好;
这里有很多你可能不需要的绒毛，但我删除了其中一个
data-target="#navbarCollapse"
它停止了动画
在w3schools上找到这个例子，你也可以看看： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
<li><a href="#tab4" data-toggle="tab">Tab4</a></li>
<li><a href="#tab5" data-toggle="tab">Tab5</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>