0

На странице находится на данный момент 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

2
  • очень много лишнего html, трудно разобраться - оставьте для примера только сами табы и какой-то условный контент в них (типа ipsum lorem) Commented 4 дек. 2017 в 8:38
  • @humster_spb Изменения сделаны Commented 4 дек. 2017 в 8:48

2 ответа 2

0

Ну, вот так, вроде, работает правильно. С 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>

7
  • Что-то уменя нехочет работать. выкладываю ссылку на страницу moorweb.moorsoftware.com/mbui/mbui.html там вот на этой странице внутри таба вертикальной формы у первой вкладки код из горизонтальной формы, хотя я вставил. у других владок все норм, проблемы у первых. если удалить html код у таба горизонтальной формы тогда удаляется у всех других форм и именно html Commented 4 дек. 2017 в 10:22
  • @IslamIlyasoglu, не открывается ссылка Commented 4 дек. 2017 в 10:23
  • mooryazilim.com/mbui/mbui.html ну, а так? Commented 4 дек. 2017 в 10:30
  • @IslamIlyasoglu, попробуйте просто скопировать моё решение и вместо ipsum вставить необходимый Вам контент Commented 4 дек. 2017 в 10:40
  • Спасибо большое. Не сработало так-как я не там ищу. что-то связано с скриптом prismjs.com . придеться заново по другому задавать вопрос вначале хотя бы поверхнотстно вяяснить в чем там дело, но точно сейчас уже понятно что дело в этом скрипте синтаксиса Commented 4 дек. 2017 в 10:57
0

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

  var code = $('pre code.language-html');
   code.html(
   code.html()
   .replace(/</g, '&lt;')
   .replace(/>/g, '&gt;')
   )

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.