4

В bootstrap есть отличные nav-tabs и nav-pills которые работают через data-toggle="tab" создаётся пара секций:

<ul class="nav nav-pills">
    <li class="active">
       <a data-toggle="tab" href="mySection1">Первая</a>
    </li>
    <li>
       <a data-toggle="tab" href="mySection2">Вторая</a>
    </li>
</ul>
<section class="tab-content">
    <section id="mySection1" class="tab-pane fade in active">
      ...
    </section>
    <section id="mySection2" class="tab-pane fade">
      ...
    </section>

     ... другие секции ...
</section>

И всё прекрасно, даже есть fade класс который добавляется в атрибут tab-pane чтобы переключение между вкладок было плавное, но когда много закладочек, и их высота сильно разнится, особенно превышая стандартную высоту вьюпорта, контент заметно подпрыгивает на переключениях из за резкозти смены размера контента, так-же в bootstrap есть такая вещь как accordion с классом collapse который делает плавно сворачивающиеся панельки между которыми можно переключаться, например вот такие: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion

Поскольку я не мастер вёрстки и js а только учусь, подскажите, как можно добавить свёртывание развёртывание контента, но в эти вот nav-tabs / nav-pills ?

Поскольку я провёл не один день в попытках найти что-то такое в гоголе и яндуксе, всё что я нашёл это https://css-tricks.com/organic-tabs/ они то как раз делают что надо, но хотелось бы не городить так много всего, а попробовать реализовать это дело максимально функционалом bootstrap и минимально jQuery.

Я также пробовал добавлять класс "collapse in" в активную и "collapse" в остальные вкладки и менять data-toggle на collapse как в аккордионах, но вкладки перестают реагировать на нажатия.

Подскажите люди добрые как-же победить этот вопрос?

Благодарю за внимание.

1 ответ 1

1

Задача: Построить закладки tabs или таблетки pills с эффектом сворачивания и разворачивания как у аккордеона. При этом обойтись штатными средствами бутстрапа, не дописывая свои скрипты и не добавляя чужие.

Решил в три этапа. Код в конце ответа показывает результаты всех трёх этапов.

1) Будем строить таблетки, потому что они ярче :) Начинаем строить не от таблеток к аккордеону, а от аккордеона к таблеткам. Берём из описания бутстрапа пример с аккордеоном и переставляем фрагменты кода, чтобы из трёх панелей получилось две. В верхнюю собираем все три заголовка, а в нижнюю - тексты к ним.

2) Скрещиваем заголовки

<div class="panel-heading" role="tab" id="headingTwo">
  <h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Collapsible Group Item #2
    </a>
  </h4>
</div>

с таблетками из другого примера бутстрапа

<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

и получаем

<li role="presentation" id="headingTwo">
    <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Collapsible Group Item #2
    </a>
</li>

3) Чтобы активная таблетка выделялась синим, нужно пристроить class="active" и data-toggle="tab". Первый атрибут относился к пункту списка <li>, а второй - к ссылке внутри этого пункта. Но у ссылки уже есть data-toggle="collapse". Поэтому оба оставшихся атрибута назначаем пункту списка.

Результат

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<style>
h3 { margin-top: 0.2em; }
.row { margin-top: 2em; }
</style>

<div class="container">

  <div class="row">
    <div class="col-xs-1"><h3>1)</h3></div>
    <div class="col-xs-11">

      <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne1">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
                Item #1
              </a>
            </h4>
          </div>
          <div class="panel-heading" role="tab" id="headingTwo1">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
                Item #2
              </a>
            </h4>
          </div>
          <div class="panel-heading" role="tab" id="headingThree1">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">
                Item #3
              </a>
            </h4>
          </div>
        </div>
        <div class="panel panel-default">
          <div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne1">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit...</p>
            </div>
          </div>
          <div id="collapseTwo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo1">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit...</p>
              <p>Anim pariatur cliche reprehenderit...</p>
            </div>
          </div>
          <div id="collapseThree1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree1">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit...</p>
              <p>Anim pariatur cliche reprehenderit...</p>
              <p>Anim pariatur cliche reprehenderit...</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div><!--row-->
  
  <div class="row">
    <div class="col-xs-1"><h3>2)</h3></div>
    <div class="col-xs-11">

      <ul class="nav nav-pills" role="tablist">
        <li role="presentation" id="headingOne2">
            <a role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
              Item #1
            </a>
        </li>
        <li role="presentation" id="headingTwo2">
            <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
              Item #2
            </a>
        </li>
        <li role="presentation" id="headingThree2">
            <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
              Item #3
            </a>
        </li>
      </ul>
    <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne2">
          <div class="panel-body">
            <p>Anim pariatur cliche reprehenderit...</p>
          </div>
        </div>
        <div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
          <div class="panel-body">
            <p>Anim pariatur cliche reprehenderit...</p>
            <p>Anim pariatur cliche reprehenderit...</p>
          </div>
        </div>
        <div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
          <div class="panel-body">
            <p>Anim pariatur cliche reprehenderit...</p>
            <p>Anim pariatur cliche reprehenderit...</p>
            <p>Anim pariatur cliche reprehenderit...</p>
          </div>
        </div>
      </div>
    </div>

    </div>
  </div><!--row-->
  
  <div class="row">
    <div class="col-xs-1"><h3>3)</h3></div>
    <div class="col-xs-11">
  
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" data-toggle="tab" class="active" id="headingOne3">
              <a role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
                Item #1
              </a>
          </li>
          <li role="presentation" data-toggle="tab" id="headingTwo">
              <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Item #2
              </a>
          </li>
          <li role="presentation" data-toggle="tab" id="headingThree">
              <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Item #3
              </a>
          </li>
        </ul>
      <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div id="collapseOne3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne3">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit...</p>
            </div>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit...</p>
              <p>Anim pariatur cliche reprehenderit...</p>
            </div>
          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit...</p>
              <p>Anim pariatur cliche reprehenderit...</p>
              <p>Anim pariatur cliche reprehenderit...</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div><!--row-->
</div><!--container-->
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Можно посмотреть живьём и в песочнице.

3
  • Утром протещу :))) вам надо постить решения на jsfiddle.net удобная песочница. 3 мая 2016 в 2:19
  • 1
    @VitalyProtasov Вот живьём. Вот в песочнице. 3 мая 2016 в 5:07
  • Круто, ещё бы сделать наползание контента не снизу а из под таблеток :)) инвертировать движение. 3 мая 2016 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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