How to enable bootstrap tabs?

Question

JavaScript

Hello everyone,
I connect bootstrap 4 tabs, after I start switching tabs, the first one does not show content.
I 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 don't understand, do I need to activate JS too?

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

if so, how? i pasted this js example but not working.
podkoyukil bootstrap files, jekveri too.
Thanks

Answer 1

you need to add something like:

<script>
$(document).ready(function() {
$("#tabs a").click(function(e) {
e.preventDefault();
$(this).tab('show');
}
);
}
);
</script>

Answer 2

Yes, you need jquery and js bootstrap, try to look at this option https://jqueryui.com/tabs/ there is a view source, this is using jquery ui

Answer 3

In js, add the following code for each tab, where in the first line write your IDs

$('#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')
  });