Bootstrap 4默认选项卡窗格活动淡入功能不起作用 [英] Bootstrap 4 default tab-pane active fade in not working

问题描述

在研究动态导航标签的过程中，我决定在用户​​点击他们选择的标签时添加淡入效果。

In the process of researching dynamic nav-tabs, I've decided to add a fade in effect when the user clicks on the tab of their choice.

首先加载模态，下面的html行使故障显示HOME选项卡。

When the modal first loads, the following line of html makes the HOME tab appear by the fault.

<div id="home" class="tab-pane active">

以上工作正常，但......

如果我用以下html代码替换上面的内容...

if I replace the above with the following html code...

<div id="home" class="tab-pane active fade in">

首次加载模态时，div home 不会褪色在即可。它只适用于用户点击其他标签然后返回HOME标签。

When the modal first loads, div home is not faded in. It only works once the user clicks on a different tab and then back on HOME tab.

我的问题是，这种行为是否正常？

My question is, is this behavior normal?

<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Toggleable / Dynamic Tabs -->

<nav class="nav nav-tabs nav-justified">
<a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
<a class="nav-item nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
<a class="nav-item nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
<a class="nav-item nav-link disabled" data-toggle="tab" href="#menu3">Disabled</a>
</nav>

<div class="tab-content">
<div id="home" class="tab-pane active fade in">
<h3>HOME</h3>
<p>Some content in menu HOME.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Some content in menu 3.</p>
</div>
</div>

推荐答案

在标签内容类

参考
https ：//getbootstrap.com/docs/4.0/components/navs/？#javascript-behavior

这是在bootstrap 4上解决它的方法。但是在bootstrap 3中，你的代码应该正常工作。

This is the way of solving it on bootstrap 4. But in bootstrap 3, your code should be working.

引导程序的相关问题3.
Bootstrap选项卡 - 活动类无法处理页面加载

Related question for bootstrap 3. Bootstrap tab - active class not working on page loading

<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 3. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Toggleable / Dynamic Tabs -->

<nav class="nav nav-tabs nav-justified">
  <a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
  <a class="nav-item nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  <a class="nav-item nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  <a class="nav-item nav-link disabled" data-toggle="tab" href="#menu3">Disabled</a>
</nav>

<div class="tab-content">
  <div id="home" class="tab-pane fade show active">
    <h3>HOME</h3>
    <p>Some content in menu HOME.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>Menu 3</h3>
    <p>Some content in menu 3.</p>
  </div>
</div>

这篇关于Bootstrap 4默认选项卡窗格活动淡入功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！