Bootstrap Javascript вкладка

Question

Я пытаюсь использовать функцию начальной загрузки карты / вкладки для создания табулированной карты, которая имеет 3 вкладки, каждая из которых соответствует своему собственному активному «телу карты»

Мой текущий код:

<div class="col-lg-8 col-md-12 col-sm-12">
      <div class="page-header">
        <h2>Social Media</h2>      
      </div>
      <div class="card text-center">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
              <a class="nav-link active" href="#insta">Instagram</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#face">Facebook</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#twit">Twitter</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div id="insta">Instagram</div>
          <div id="face">Facebook</div>
          <div id="twit">Twitter</div>
        </div>
      </div>
      <!-- END WIDGET 2 -->
    </div>

$(document).ready(function(){
$(".nav-tabs a").click(function(){
    $(this).tab('show');
});
});

Создает карту правильно, и она действительно показывает соответствующие заголовки вкладок с соответствующими ссылками.

Я пытаюсь сделать так, чтобы, если вкладка Instagram активна, она отображала текст'Instagram'.То же самое для других 2. В настоящее время они являются просто неактивными вкладками, и тело основной вкладки показывает все три строки текста.

Javascript выглядит правильно, но он просто не табулирует правильно

Вот кодекс:

https://codepen.io/anon/pen/gKLJrm

Answer 1

Вам нужно использовать соответствующую разметку для вкладок с tab-content и tab-pane, чтобы заставить работать вкладки: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

(jquery не требуется)

https://www.codeply.com/go/p5Zm4JA5jb

  <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
                </li>
            </ul>
        </div>
        <div class="tab-content card-body">
            <div id="insta" class="tab-pane active">Instagram</div>
            <div id="face" class="tab-pane">Facebook</div>
            <div id="twit" class="tab-pane">Twitter</div>
        </div>
  </div>

Обратите внимание, что nav-link и tab-pane имеют набор active.

Answer 2

Я надеюсь, что это решит вашу проблему

$(document).ready(function() {
$('.nav-item a').on('click', function(e){
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});

li.nav-item.active a {
    background: #fff;
    border: 1px solid #eee;
    border-bottom: none
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

        <div class="col-lg-8 col-md-12 col-sm-12">
          <div class="page-header">
            <h2>Social Media</h2>      
          </div>
          <div class="card text-center">
            <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs" id="myTabs">
                <li class="nav-item active">
                  <a class="nav-link" href="#insta">Instagram</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#face">Facebook</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#twit">Twitter</a>
                </li>
              </ul>
            </div>
            <div class="card-body tab-content">
              <div id="insta" class="tab-pane active">Instagram</div>
              <div id="face" class="tab-pane">Facebook</div>
              <div id="twit" class="tab-pane">Twitter</div>
            </div>
          </div>
          <!-- END WIDGET 2 -->
        </div>