Html 引导中以前的工作选项卡显示多个活动_Html_Bootstrap 4

Html 引导中以前的工作选项卡显示多个活动

html bootstrap-4

Html 引导中以前的工作选项卡显示多个活动,html,bootstrap-4,Html,Bootstrap 4,我有一个使用标签头的引导卡，它工作得很好我添加了一些javascript文件来更新东西，特别是对于我正在使用的datetimepicker，从那以后我就遇到了选项卡问题。目前，我的第一个选项卡（Instagram）在默认情况下处于活动状态。现在，当我单击另一个选项卡时，它将处于活动状态，instagram将保持活动状态。不管怎样，它都会显示活动选项卡和以前激活的选项卡都处于活动状态以下是最新CDN文件的标题： <head> <link rel="stylesheet" hr

我有一个使用标签头的引导卡，它工作得很好

我添加了一些javascript文件来更新东西，特别是对于我正在使用的datetimepicker，从那以后我就遇到了选项卡问题。目前，我的第一个选项卡（Instagram）在默认情况下处于活动状态。现在，当我单击另一个选项卡时，它将处于活动状态，instagram将保持活动状态。不管怎样，它都会显示活动选项卡和以前激活的选项卡都处于活动状态

以下是最新CDN文件的标题：

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>

以及html：

<div class="card text-center">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item active">
              <a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a>
            </li>
            <li class="nav-item">
              <a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a>
            </li>
            <li class="nav-item">
              <a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div class="tab-content">
            <div id="instagram" class="tab-pane fade show active">
              <div id="instafeed"></div>
            </div>
            <div id="twitter" class="tab-pane fade">
              twitter
            </div>
            <div id="facebook" class="tab-pane fade">
              facebook
            </div>
          </div>
        </div>
      </div>










啁啾
脸谱网

请检查下面的小提琴

从

标记中删除活动的类

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a> </li> <li class="nav-item"> <a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a> </li> <li class="nav-item"> <a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div id="instagram" class="tab-pane fade show active"> <div id="instafeed"></div> </div> <div id="twitter" class="tab-pane fade"> twitter </div> <div id="facebook" class="tab-pane fade"> facebook </div> </div> </div> </div>

啁啾脸谱网
请检查下面的小提琴

从
标记中删除活动的类

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a> </li> <li class="nav-item"> <a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a> </li> <li class="nav-item"> <a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div id="instagram" class="tab-pane fade show active"> <div id="instafeed"></div> </div> <div id="twitter" class="tab-pane fade"> twitter </div> <div id="facebook" class="tab-pane fade"> facebook </div> </div> </div> </div>

啁啾脸谱网
是的，明白了！多谢了，明白了！谢谢