CODEWITHSUNDEEP
htmlbootstrap-4
Geoff_S
Geoff_S

Reputation: 5107

Previously working tabs in bootstrap showing multiple active

I had a bootstrap card using tab headers that was working perfectly.

I added some javascript files to update things, especially for a datetimepicker I'm using, and since then I'm having tab issues. Currently, I have my first tab (Instagram) active on default. Now when I click another tab, it becomes active and instagram remains active. No matter what, it shows the active tab and the previously activated tab as both being active.

Here's the head with the up to date CDN files:

<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/[email protected]/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/[email protected]/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/[email protected]/js/gijgo.min.js" type="text/javascript"></script>

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

Upvotes: 0

Views: 1071

Answers (1)

Vishal
Vishal

Reputation: 178

Please Check Below Fiddle

Fiddle

Remove active class from <li> tag.

<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/[email protected]/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/[email protected]/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/[email protected]/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>

Upvotes: 3

Related Questions