Question

我有一个使用标签标题的引导卡，它运行正常。

我添加了一些javascript文件来更新内容，特别是对于我正在使用的datetimepicker，从那时起我就遇到了tab问题。目前，我的第一个标签（Instagram）默认处于活动状态。现在当我点击另一个标签时，它变为活动状态，Instagram仍然有效。无论如何，它都会显示活动选项卡和之前激活的选项卡，因为它们都处于活动状态。

这是带有最新CDN文件的头部：

$ composer install                                                     
Loading composer repositories with package information Updating dependencies (including require-dev) Package operations: 18 installs, 0 updates, 0 removals
  - Installing zendframework/zend-stdlib (3.2.0): Loading from cache
  - Installing zendframework/zend-loader (2.6.0): Loading from cache
  - Installing zendframework/zend-eventmanager (3.2.1): Loading from cache
  - Installing zendframework/zend-view (2.10.0): Loading from cache
  - Installing psr/container (1.0.0): Loading from cache
  - Installing container-interop/container-interop (1.2.0): Loading from cache
  - Installing zendframework/zend-servicemanager (3.3.2): Loading from cache
  - Installing zendframework/zend-validator (2.10.2): Loading from cache
  - Installing zendframework/zend-escaper (2.6.0): Loading from cache
  - Installing zendframework/zend-uri (2.6.1): Loading from cache
  - Installing zendframework/zend-http (2.8.0): Loading from cache
  - Installing zendframework/zend-router (3.0.2): Loading from cache
  - Installing zendframework/zend-config (3.2.0): Loading from cache
  - Installing zendframework/zend-modulemanager (2.8.2): Loading from cache
  - Installing zendframework/zend-mvc (3.1.1): Loading from cache
  - Installing symfony/options-resolver (v3.4.11): Loading from cache
  - Installing endroid/qrcode (1.9.3): Loading from cache
  - Installing acelaya/zf2-acqrcode (v1.0.0): Loading from cache

和html：

<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>

Answer 1

请检查以下小提琴

Fiddle

从<li>代码中删除有效类。

<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>

之前在bootstrap中工作的选项卡显示多个活动

1 个答案: