@relows
Учусь веб дизайну и программированию

Как добавить автоматическую смену табов?

Мне нужно чтобы табы со скрина менялись автоматически(раз в 5 секунд)5c177dcbd519e315625060.png
<div class="container">
  <div class="tabs">
    <div class="opened">
      <div id="London" class="tabcontent">
        <img src="img1/tab.jpg" alt="">
      </div>

      <div id="Paris" class="tabcontent">
        <img src="img1/tab2.jpg" alt="">
      </div>

      <div id="Tokyo" class="tabcontent">
        <img src="img1/tab3.jpg" alt="">
      </div>

      <div id="Tokyo2" class="tabcontent">
        <img src="img1/tab4.jpg" alt="">
      </div>

      <div id="Tokyo1" class="tabcontent">
        <img src="img1/tab5.jpg" alt="">
      </div>
    </div>

    <div class="tab1">
      <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen"><img src="img1/tab_micro.png" alt=""></button>
      <button class="tablinks" onclick="openCity(event, 'Paris')"><img src="img1/tab_micro2.png" alt=""></button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')"><img src="img1/tab_micro3.png" alt=""></button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo2')"><img src="img1/tab_micro4.png" alt=""></button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo1')"><img src="img1/tab_micro5.png" alt=""></button>
    </div>
  </div>
</div>

.tabs {
  flex: 476;
  margin: 0 auto 5px auto;
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row nowrap;
}

.opened {
    flex: 476;
  padding: 0;
  border: 1px solid #003258;
  border-top: none;
}

.tablinks {
  padding: 0;
  margin: 0;
}

/* Style the tab */
.tab1 {
    border-top: none;
    border-right: 1px solid #003258;
  padding: 0;
  flex: 102;
  background-color: black;
}

/* Style the buttons inside the tab */
.tab1 button {
  padding: 0;
  background-color: inherit;
  color: black;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab1 button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab1 button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    padding: 0;
    border-left: none;
    height: auto;
}

.tabcontent img {
    max-width: 100%;
    height: auto;
}

.tablinks img {
    max-width: 100%;
    height: auto;
    border-bottom: 1px solid #003258;
}

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
  • Вопрос задан
  • 202 просмотра
Решения вопроса 1
webinar
@webinar Куратор тега Веб-разработка
Учим yii: https://youtu.be/-WRMlGHLgRg
Как добавить автоматическую смену табов?

https://learn.javascript.ru/settimeout-setinterval

офтоп: А зачем css разместили?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 июл. 2019, в 23:31
9000 руб./за проект
23 июл. 2019, в 22:14
18000 руб./за проект
23 июл. 2019, в 20:31
500 руб./за проект