Блог

Главная - Вопросы по программированию - вкладки, используемые в примере изображения, являются основными вкладками, предоставляемыми material-ui

вкладки, используемые в примере изображения, являются основными вкладками, предоставляемыми material-ui

#javascript #html #jquery #css

Вопрос:

Я ищу решение для слайдера с дополнительной вкладкой внизу. Я нашел что-то подобное, но это еще не тот эффект, которого я хочу достичь. Я хотел бы иметь такой же эффект, как на фотографии ниже. Кто-нибудь может мне помочь?

 $('.tabs').on('show.bs.tab', function (e) {     
  if (e.relatedTarget === undefined) {    
    $($(e.target).attr('href')).slideDown('slow');
  }
  else {
    $($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,
      done: function() {
        $($(e.target).attr('href')).slideDown('slow');
      }
    });
  } 
}); 
 .tab-pane{
  background:#fff;
  padding: 0px; 
} 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="tabs">


<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel"  style="display: block;"><p><img src="https://iv.pl/images/35e7e17273e7367fe577cfeb625918af.png"></p></div>
  <div class="tab-pane " id="profile" role="tabpanel"  style="display: none;"><p><img src="https://iv.pl/images/c46130a679b900e9158c02ff965770b8.png"></p></div>
  <div class="tab-pane " id="messages" role="tabpanel" style="display: none;"><p><img src="https://iv.pl/images/35e7e17273e7367fe577cfeb625918af.png"></p></div>
  <div class="tab-pane " id="settings" role="tabpanel" style="display: none;"><p><img src="https://iv.pl/images/c46130a679b900e9158c02ff965770b8.png"></p></div>  
</div>
<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Mowers</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Jewelry</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Cleaner</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Watch</a>
  </li>
</ul>
</div>

Также мне нужно переключить ползунок на щелчок музы (влево или вправо)
экран1:
введите описание изображения здесь

Ответ №1:

Вкладки, используемые в примере изображения, являются основными вкладками, предоставляемыми material-ui

https://material-ui.com/components/tabs/#tabs

Комментарии:

1. Зик, действительно спасибо за совет. Не могли бы вы, пожалуйста, помочь мне, как я могу создать этот код, чтобы использовать его из html-файла?

2. @Сильвестр строить с нуля было бы действительно сложно. Поскольку вы не используете React, вы можете получить вкладки с помощью MaterializeCSS, это ссылка на их сайт materializecss.com/tabs.html . MaterializeCSS-это библиотека CSS, похожая на bootstrap, но она следует руководству по стилю материалов Google.

Метки: , , ,