Bootstrap tab without jquery?

Question

Was looking for how to make bootstrap tabs without connection jquery and bootstrap.min, I do not work.Standard solution to the js conflict. Please is here know give a link where to look. Please! I get fired!

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

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

Answer 1

Use pure javascript! Note: On this code, I use the menu item id as target to content tab.

window.onload = function() {
    var menuItens = document.querySelectorAll('#menuTabs>li');
    for (var i = 0; i < menuItens.length; i++) {
        menuItens[i].addEventListener("click", function(){
            // occulting divs - removing .active class
            var tabs = document.querySelectorAll('.tab-content>.tab-pane');
            for (var k = 0; k < tabs.length; k++) {
                tabs[k].className = "tab-pane";
            }
            // removing .active from menu itens
            for (var j = 0; j < menuItens.length; j++) {
                menuItens[j].className = "";
            }
            // setting .active in clicked item
            this.className = "active";
            // getting target id
            var linkTab = this.getElementsByTagName("A")[0].id;
            // showing the selected tab div
            var tab = document.querySelectorAll('.tab-content>#'+linkTab)[0];
            tab.className = "tab-pane active";
        });
    };
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <ul id="menuTabs" class="nav nav-tabs nav-justified">
    <li class="active"><a href="javascript:void(0);" class="menuItem" id="tab_1">Home</a></li>
    <li><a href="javascript:void(0);" class="menuItem" id="tab_2">About</a></li>
    <li><a href="javascript:void(0);" class="menuItem" id="tab_3">Contact</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab_1">
      <div class="container">
        <h4>Home</h4>
        <p>Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Diuretics paradis num copo é motivis de denguis. Casamentiss faiz malandris se pirulitá.</p>
      </div>
    </div>
    <div class="tab-pane" id="tab_2">
      <div class="container">
        <h4>About</h4>
        <p>Detraxit consequat et quo num tendi nada. Per aumento de cachacis, eu reclamis. Si num tem leite então bota uma pinga aí cumpadi! Cevadis im ampola pa arma uma pindureta.</p>
      </div>
    </div>
    <div class="tab-pane" id="tab_3">
      <div class="container">
        <h4>Contact</h4>
        <p>Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum. Sapien in monti palavris qui num significa nadis i pareci latim. in elementis mé pra quem é amistosis quis leo.</p>
      </div>
    </div>
  </div>
</div>