How to activate bootstrap tabs?

Hi all,

Connect the bootstrap tabs 4, after starting to switch tabs, the first shows no content.
used the example from the site:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
 <li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
 <li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
 <li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
 <div class="tab-pane active" id="home" role="tabpanel">...</div>
 <div class="tab-pane" id="profile" role="tabpanel">...</div>
 <div class="tab-pane" id="messages" role="tabpanel">...</div>
 <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>


I do not understand, you need more of JS-om activated?
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})

if so, how? I inserted this example is js, but not working.
files bootstrap podkluchil, gaquere too.

Thank you
July 2nd 19 at 17:48
3 answers
July 2nd 19 at 17:50
need to add something like:
the <script>
$(document).ready(function() {
$("#tabs a").click(function(e) {
e.preventDefault();
$(this).tab('show');
}
);
}
);
</script>
July 2nd 19 at 17:52
Yes, you need jquery and bootstrap js, try to look here https://jqueryui.com/tabs/ there's view source, it's using jquery ui
July 2nd 19 at 17:54
In js add this code for each tab, where the first line is to register your ID
$('#home').click(function(e) {
e.preventDefault()
$(this).tab('show')
});

 $('#profile').click(function(e) {
e.preventDefault()
$(this).tab('show')
});

 $('#messages').click(function(e) {
e.preventDefault()
$(this).tab('show')
 });
and don't forget to connect the bootstrap script, and after him your file with scripts - Gabriella.Gutmann commented on July 2nd 19 at 17:57

Find more questions by tags HTMLJavaScriptLayoutBootstrap