Question

我已经获得了bootstrap的基本选项卡，我希望当我更改选项卡菜单时，内容（选项卡窗格）应该像bootstrap collapse一样动画（向下滑动/向上滑动）有可能吗？

<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">This Is good</div>
  <div class="tab-pane" id="profile" role="tabpanel">This is better</div>
  <div class="tab-pane" id="messages" role="tabpanel">Thhis is excellent </div>
  <div class="tab-pane" id="settings" role="tabpanel">This is poor</div>
</div>

我已经没有想法所以请帮助我，我知道这是一个愚蠢的问题。

以下是EXAMPLE

Answer 1

首先下载animate.css并将其添加到代码中。最后给class tab-content

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">

    <ul class="nav" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active  animated bounceInDown" id="home" role="tabpanel">This Is good</div>
          <div class="tab-pane  animated bounceInDown" id="profile" role="tabpanel">This is better</div>
          <div class="tab-pane  animated bounceInDown" id="messages" role="tabpanel">Thhis is excellent </div>
          <div class="tab-pane  animated bounceInDown" id="settings" role="tabpanel">This is poor</div>
        </div>

＆＃13;

Answer 2

请试试这个。我为滑动效果添加了一些js。

$('.tabs').on('show.bs.tab', function (e) {    	
  if (e.relatedTarget === undefined) {    
    $($(e.target).attr('href')).slideDown('slow');
  }
  else {
    $($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,
      done: function() {
        $($(e.target).attr('href')).slideDown('slow');
      }
    });
  }	
});

.tab-pane{
  background:#ccc;
  padding:20px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="tabs">
<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel"  style="display: block;"><p>This Is good</p></div>
  <div class="tab-pane " id="profile" role="tabpanel"  style="display: none;"><p>This is better</p></div>
  <div class="tab-pane " id="messages" role="tabpanel" style="display: none;"><p>Thhis is excellent</p></div>
  <div class="tab-pane " id="settings" role="tabpanel" style="display: none;"><p>This is poor</p></div>  
</div>
</div>

Answer 3

那是怎么回事：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  $($(e.target).attr('href')).hide()
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $($(e.target).attr('href')).slideDown()
})

如何将上滑/下滑效果赋予引导选项卡窗格

3 个答案: