function openCity(event, 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";
event.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();body {font-family: Arial;}
/* Styling for the tabs */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Button styling for the tabs */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Hover effect for buttons */
.tab button:hover {
background-color: #ddd;
}
/* Active button styling */
.tab button.active {
background-color: #ccc;
}
/* Styling for the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<p data-aos="zoom-out-up">This example demonstrates using JavaScript to automatically select the London tab upon page load.</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent" data-aos="zoom-in">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent" data-aos="fade-down">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent" data-aos="flip-up">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html> I am exploring AOS animations and encountered a problem with the code above. The animation functions properly for the first tab content but does not work for the second and third tabs. Additionally, when switching between tabs, the animation fails to trigger. I have not included any extra libraries in my code. Any suggestions on how to resolve this issue would be greatly appreciated.