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

Question

[relows]

Мне нужно, чтобы табы со скрина менялись автоматически (раз в 5 секунд).

<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>

Answer 1

[Максим Тимофеев]

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

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

офтоп: А зачем css разместили?

Comments

[relows]

Я не был уверен в том что нельзя это сделать с css

Answer 2

[mamedenss]

У меня возник вопрос, сделал так как автор, но есть два таба первого уровня и внутренние подтабы второго уровня (меню - подменю), для каждого сделан свой скрипт. При переходе между меню остается активное последний кликнутый пункт подменю. Как сделать что бы при переходе между меню возвращало под меню стандартное значение, то есть активный только первый пункт под меню???