@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>
  • Вопрос задан
  • 287 просмотров
Решения вопроса 1
webinar
@webinar Куратор тега Веб-разработка
Учим yii: https://youtu.be/-WRMlGHLgRg
Как добавить автоматическую смену табов?

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

офтоп: А зачем css разместили?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@mamedenss
У меня возник вопрос, сделал так как автор, но есть два таба первого уровня и внутренние подтабы второго уровня (меню - подменю), для каждого сделан свой скрипт. При переходе между меню остается активное последний кликнутый пункт подменю. Как сделать что бы при переходе между меню возвращало под меню стандартное значение, то есть активный только первый пункт под меню???
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы