CODEWITHSUNDEEP
jquerytwitter-bootstraptabs
Maxim Kuznetsov
Maxim Kuznetsov

Reputation: 31

Bootstrap tab without jquery?

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>

Upvotes: 3

Views: 5091

Answers (2)

J011195
J011195

Reputation: 733

A revised version posted by Maikon Matheus in ES6. Someone may find it useful.

JS:

let getDOM = (id) => {
  return document.getElementById(id)
}

let onLoad = () => {
  const tabs = document.querySelectorAll("#navTabs>li>a"),
    panes = document.querySelectorAll("#navPanes>div")

  for (let i = 0; i < tabs.length; i++)
    tabs[i].addEventListener("click", function () {
      for (let i1 = 0; i1 < tabs.length; i1++) tabs[i1].classList.remove("active");

      for (let i2 = 0; i2 < panes.length; i2++) panes[i2].classList.remove("show", "active");

      const tab = this.classList, pane = getDOM(this.getAttribute("aria-controls")).classList

      tab.add("active")
      pane.add("show", "active")
    })
}

HTML:

<div>
  <ul class="nav nav-tabs nav-justified" id="navTabs">
    <li class="nav-item">
      <a class="nav-link active" id="first-tab" aria-controls="first-pane">First tab</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="second-tab" aria-controls="second-pane">Second tab</a>
    </li>
  </ul>
  <div class="tab-content" id="navPanes">
    <div class="tab-pane fade sh ow active" id="first-pane">
      First pane
    </div>
    <div class="tab-pane fade" id="second-pane">
      Second pane 
    </div>
  </div>
</div>

P.S.

Don't forget about <body onload="bodyLoad()">.

Upvotes: 1

Maikon Matheus
Maikon Matheus

Reputation: 789

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>

Upvotes: 5

Related Questions