On initial page load, the tabs show but the content for that selected tab does not.
If I click the “Link” tab and back to the “Post” tab then it shows up.
JavaScript
x
21
21
1
<div class="container">
2
<div class="card text-center">
3
<div class="card-header">
4
<ul class="nav nav-tabs card-header-tabs" id="tabs">
5
<li class="nav-item">
6
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
7
</li>
8
<li class="nav-item">
9
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
10
</li>
11
</ul>
12
</div>
13
<div class="card-body">
14
<div class="tab-content">
15
<div class="tab-pane" id="post">post</div>
16
<div class="tab-pane" id="link">link</div>
17
</div>
18
</div>
19
</div>
20
</div>
21
On page load it looks like this (the div with the tab-pane
class hasn’t been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Advertisement
Answer
Check this out
JavaScript
1
24
24
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
3
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
4
5
<div class="container">
6
<div class="card text-center">
7
<div class="card-header">
8
<ul class="nav nav-tabs card-header-tabs" id="tabs">
9
<li class="nav-item">
10
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
14
</li>
15
</ul>
16
</div>
17
<div class="card-body">
18
<div class="tab-content">
19
<div class="tab-pane active" id="post">post</div>
20
<div class="tab-pane" id="link">link</div>
21
</div>
22
</div>
23
</div>
24
</div>