Jump to content

BlueLola

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About BlueLola

  • Rank
    Newbie
  1. 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!
×
×
  • Create New...