BlueLola Posted January 18, 2020 Share Posted January 18, 2020 I'm quite new to web development and I have been using https://www.w3schools.com/howto/howto_js_vertical_tabs.asp to create some vertical tabs on my own project. When I launch the page however, the content from both tabs I have added so far shows by default. When I select a tab, it does correct itself, but if I refresh or reopen the page, I am seeing this defect again. What am I doing wrong? Has anyone else experienced this? This is my code, I am using pure css so have just added some grids - I wonder if this is causing it somehow? <script> function goBack() { window.history.back(); } function openWalkthrough(evt, WT) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks.className = tablinks.className.replace("active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(WT).style.display = "block"; evt.currentTarget.className += "active"; } </script> <div class="pure-u-1 pure-u-md-22-24" style="background-color: #cccccc; height: 100vh;"> <div class="tab"> <button class="tablinks" onclick="openWalkthrough(event, 'A')"> <div class="pure-g"> <div class="pure-u-2-3"> <p class="walkthroughTitle">Walk through 1</p> <p class="walkthroughAuthor">Written by Lorem</p> <p class="walkthroughDescription"> Walk through description </p> </div> <div class="pure-g"> <div class="pure-u-1-3"> <img class="walkthroughMediaIcon" src="../img/running-man-256.png"> </div> </div> </div> </button> <button class="tablinks" onclick="openWalkthrough(event, 'B')"> <div class="pure-g"> <div class="pure-u-2-3"> <p class="walkthroughTitle">Walk through 2</p> <p class="walkthroughAuthor">Written by Ipsum</p> <p class="walkthroughDescription"> This is a test description </p> </div> <div class="pure-g"> <div class="pure-u-1-3"> <img class="walkthroughMediaIcon" src="../img/running-man-256.png"> </div> </div> </div> </button> </div> <div id="A" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="B" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> </div> I haven't changed any css. Thanks in advance for your help! Link to comment Share on other sites More sharing options...
Funce Posted January 21, 2020 Share Posted January 21, 2020 Hi there, Welcome to the forums! You're code's run into a little problem, with the forum's in built formatter. Please make sure to use codeblocks for your code lest this continue to happen. Now in regards to your problem, it lies in your tablinks. None of your items that you've created are getting selected to start off with. Here's the example code: <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> Are you able to work it out from here? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now