ARTICLE AD BOX
I have in-page tabs that work well, and they look 'active' when you click on them which is great, but I also have images in divs I use to access the tabs and when using that, they don't get their active look and I want them to.
Here is the CSS for the tabs:
<html lang="en"> <head> <style> .tab button:hover { background-color: #ffb100; } .tab button.active { background-color: #ffb100; } </style> </head>the tabs and links in the HTML:
<div class="container"> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'two')">Two</button> <button class="tablinks" onclick="openCity(event, 'three')">Three</button> </div> <div id="one" class="tabcontent" style="display:none"> (I'm one) <div class="arrowright" onclick="openCity(event, 'two')">arrowright</div> </div> <div id="two" class="tabcontent" style="display:none"> (I'm two) <div class="arrowleft" onclick="openCity(event, 'one')">arrowleft</div> <div class="arrowright" onclick="openCity(event, 'three')">arrowright</div> </div> <div id="three" class="tabcontent" style="display:none"> (I'm three) <div class="arrowleft" onclick="openCity(event, 'two')">arrowleft</div> </div> </div>and the JavaScript function:
<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"; } document.body.addEventListener('DOMContentLoaded', openCity(event, 'one')); </script>