bootstrap 3 не показывает у tab-content первые табы

347
05 декабря 2017, 23:06

На странице находится на данный момент 3 контейнера с табами. Делаю что-то на подобие компоненты bootstrap стандарты фирмы одним словом. Но возникла проблема во всех первых табов каждого контейнера показывает только контент таба первого контейнера. консоль проверял, скрипт коментировал, проблема где-то в html, id может не так задал. в пятницу весь день мучился. помогите.

первый контейнер с табами:

                <div class="col-sm-12">
                    <div>
                      <!-- Nav tabs -->
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#htmlHorizontal" aria-controls="htmlHorizontal" role="tab" data-toggle="tab">HTML</a></li>
                        <li role="presentation"><a href="#cssHorizontal" aria-controls="cssHorizontal" role="tab" data-toggle="tab">CSS</a></li>
                        <li role="presentation"><a href="#jsHorizontal" aria-controls="jsHorizontal" role="tab" data-toggle="tab">JS</a></li>
                        <li role="presentation"><a href="#embededHorizontal" aria-controls="embededHorizontal" role="tab" data-toggle="tab">EMBEDED</a></li>
                      </ul>
                      <!-- Tab panes -->
                      <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="htmlHorizontal">
                            <pre>
                                <code class="line-numbers language-html whitespace-normalization" tabindex="-1">
                                    <div class="mbui-horizontal-form">
                                        lorem ipsum 1
                                    </div>
                                </code>
                            </pre>
                        </div>
                      </div>
                    </div>
                </div>

второй контейнер с табами:

                <div class="col-sm-12">
                    <div>
                      <!-- Nav tabs -->
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#htmlVertical" aria-controls="htmlVertical" role="tab" data-toggle="tab">HTML</a></li>
                        <li role="presentation"><a href="#cssVertical" aria-controls="cssVertical" role="tab" data-toggle="tab">CSS</a></li>
                        <li role="presentation"><a href="#jsVertical" aria-controls="jsVertical" role="tab" data-toggle="tab">JS</a></li>
                        <li role="presentation"><a href="#embededVertical" aria-controls="embededVertical" role="tab" data-toggle="tab">EMBEDED</a></li>
                      </ul>
                      <!-- Tab panes -->
                      <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="htmlVertical">
                            <pre>
                                <code class="line-numbers language-html whitespace-normalization" tabindex="0">
                                    <div class="mbui-vertical-form">
                                      lorem ipsum 2
                                    </div>
                                </code>
                            </pre>
                        </div>
                      </div>
                    </div>
                </div>

как уже сказал выше во втором контейнере в первом табе показывает из первого контейнера первого таба почему-то.

ссылка на оригиналную страницу: http://mooryazilim.com/mbui/mbui.html

Answer 1

Ну, вот так, вроде, работает правильно. С id у Вас всё было в порядке, но - первому диву с class="tab-pane active" в каждой группе надо ещё задать классы fade in, а остальным - класс fade:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<div class="container"> 
		<div class="col-sm-12"> 
 
                      <!-- Nav tabs --> 
                      <ul class="nav nav-tabs" role="tablist"> 
                        <li role="presentation" class="active"><a href="#htmlHorizontal" aria-controls="htmlHorizontal" role="tab" data-toggle="tab">HTML</a></li> 
                        <li role="presentation"><a href="#cssHorizontal" aria-controls="cssHorizontal" role="tab" data-toggle="tab">CSS</a></li> 
                        <li role="presentation"><a href="#jsHorizontal" aria-controls="jsHorizontal" role="tab" data-toggle="tab">JS</a></li> 
                        <li role="presentation"><a href="#embededHorizontal" aria-controls="embededHorizontal" role="tab" data-toggle="tab">EMBEDED</a></li> 
                      </ul> 
 
                      <!-- Tab panes --> 
                      <div class="tab-content"> 
                        <div role="tabpanel" class="tab-pane active fade in" id="htmlHorizontal"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="-1"> 
                                    <div class="mbui-horizontal-form"> 
 
                                        lorem ipsum 1-1 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						<div role="tabpanel" class="tab-pane fade" id="cssHorizontal"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="-1"> 
                                    <div class="mbui-horizontal-form"> 
 
                                        lorem ipsum 1-2 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						<div role="tabpanel" class="tab-pane fade" id="jsHorizontal"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="-1"> 
                                    <div class="mbui-horizontal-form"> 
 
                                        lorem ipsum 1-3 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						<div role="tabpanel" class="tab-pane fade" id="embededHorizontal"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="-1"> 
                                    <div class="mbui-horizontal-form"> 
 
                                        lorem ipsum 1-4 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
                      </div> 
					   
					  <div class="col-sm-12"> 
                    <div> 
 
                      <!-- Nav tabs --> 
                      <ul class="nav nav-tabs" role="tablist"> 
                        <li role="presentation" class="active"><a href="#htmlVertical" aria-controls="htmlVertical" role="tab" data-toggle="tab">HTML</a></li> 
                        <li role="presentation"><a href="#cssVertical" aria-controls="cssVertical" role="tab" data-toggle="tab">CSS</a></li> 
                        <li role="presentation"><a href="#jsVertical" aria-controls="jsVertical" role="tab" data-toggle="tab">JS</a></li> 
                        <li role="presentation"><a href="#embededVertical" aria-controls="embededVertical" role="tab" data-toggle="tab">EMBEDED</a></li> 
                      </ul> 
 
                      <!-- Tab panes --> 
                      <div class="tab-content"> 
					   
                        <div role="tabpanel" class="tab-pane fade in active" id="htmlVertical"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="0"> 
                                    <div class="mbui-vertical-form"> 
                                      lorem ipsum 2-1 
 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						<div role="tabpanel" class="tab-pane fade" id="cssVertical"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="0"> 
                                    <div class="mbui-vertical-form"> 
                                      lorem ipsum 2-2 
 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						<div role="tabpanel" class="tab-pane fade" id="jsVertical"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="0"> 
                                    <div class="mbui-vertical-form"> 
                                      lorem ipsum 2-3 
 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						<div role="tabpanel" class="tab-pane fade" id="embededVertical"> 
                            <pre> 
                                <code class="line-numbers language-html whitespace-normalization" tabindex="0"> 
                                    <div class="mbui-vertical-form"> 
                                      lorem ipsum 2-4 
 
                                    </div> 
                                </code> 
                            </pre> 
                        </div> 
						 
						 
						 
						 
                      </div> 
                    </div> 
                </div> 
 
                </div> 
	 
	</div> 
   
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 2

ошибка была найдена. во всем виноват был скрипт ниже. Скрипт был для того чтобы заменить больше меньше на код. но почему-то он создал ошибку. Причина неизвестна пока-что. в ручную пришлось заменять. может если в each() функцию засунуть будет работать незнаю. 

  var code = $('pre code.language-html');
   code.html(
   code.html()
   .replace(/</g, '&lt;')
   .replace(/>/g, '&gt;')
   )
READ ALSO
JS &ldquo;межпроцесное&rdquo; взаимодействие
javascript

JS “межпроцесное” взаимодействие

Есть таймер, например, на 1 секундуОн выполняет какое-то действие и если оно длится дольше 1 секунды начинаются глюки ибо следующий проход...

 273
Формат текущей даты и времени
javascript

Формат текущей даты и времени

Как получить текущую дату и время в формате: 12:50:12 0412

 322
Раскраска частей мультимаршрута
javascript

Раскраска частей мультимаршрута

Как раскрасить части мультимаршрута? От точки A до B один цвет, а от точки B до C другой

 220
Изменить js срипт
javascript

Изменить js срипт

Есть скрипт простенький

 279