jquery - 没有 jquery 的 Bootstrap 选项卡？

Question

一直在寻找如何在不连接jquery和bootstrap.min的情况下制作 Bootstrap 选项卡，我没有工作。js冲突的标准解决方案。请在这里知道给一个链接在哪里看。请!我被解雇了!

<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

使用纯javascript! 注意:在此代码中，我使用菜单项 ID 作为内容选项卡的目标。

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>