What is wrong???
My code looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sexy Tabs</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="tab"> <li><a href="#" class="link active" id="btn1">Tab01</a></li> <li><a href="#" class="link" id="btn2">Tab02</a></li> <li><a href="#" class="link" id="btn3">Tab03</a></li> </ul> <div id="page1" class="content"> <h1>Tab01</h1> <p>Some page content</p> </div> <div id="page2" class="content"> <h1>Tab02</h1> <p>This is the second page</p> </div> <div id="page3" class="content"> <h1>Tab02</h1> <p>Third Page</p> </div> <script> function openTab(evt, page) { var i, pages, links; pages = document.getElementsByClassName("content"); for (i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } links = document.getElementsByClassName("link"); for (i = 0; i < links.length; i++) { links[i].className = links[i].className.replace(" active", ""); } document.getElementById(page).style.display = "block"; evt.currentTarget.className += " active"; } document.querySelector("#btn1").addEventListener("click", openTab(event,'page1'), false); document.querySelector("#btn2").addEventListener("click", openTab(event,'page2'), false); document.querySelector("#btn3").addEventListener("click", openTab(event,'page3'), false); </script>
Often have questions like this?
Learn more efficiently, for free:
