Вопросы Теги

Bootstrap 4 панель вкладок по умолчанию активно исчезает, не работает

В процессе исследования динамических навигационных вкладок я решил добавить эффект затухания, когда пользователь нажимает на выбранную вкладку.

Когда модальный загружается впервые, следующая строка html заставляет вкладку HOME появляться по ошибке. 

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

Выше работает нормально, но ...

, если я заменю вышеприведенное на следующий HTML-код ... 

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

Когда модал впервые загружается, div home не исчезает в . Он работает только после того, как пользователь нажмет на другую вкладку, а затем вернется на вкладку HOME .

У меня вопрос: нормально ли это поведение? 

<!-- 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>
8
задан ASPiRE 3 February 2018 в 05:04
поделиться