<div class="tab" style="margin-top: 1.6%;">
  <button class="tablinks" onclick="openCity(event, 'Sun0')">Sun</button>
  <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>
  <button class="tablinks" onclick="openCity(event, 'Tue0')">Tue</button>
   <button class="tablinks" onclick="openCity(event,'Wed0')">Wed</button>
  <button class="tablinks" onclick="openCity(event, 'Thu0')">Thu</button>
  <button class="tablinks" onclick="openCity(event, 'Fri0')">Fri</button>
</script>

<script>
document.getElementsByClassName('tablinks').click()
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";
}
</script>