Question

我尝试使用bootstrap的卡片/标签功能来创建一张带有3个标签的列表卡片，每张标签对应于它自己的活动卡片正面<＆＃39; < / p>

我目前的代码：

<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标签处于有效状态，它会显示文字＆＃39; Instagram＆＃39;。对于其他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>

Bootstrap javascript标签卡

2 个答案: