dane Posted August 3, 2020 Share Posted August 3, 2020 Hello I am having some difficulties with my javascript tabs. I used this tutorial to set up my tabs. https://www.w3schools.com/howto/howto_js_tabs.asp For the most part it works but I have a couple of pages that use it with me creating a dynamic amount of tabs. It will works probably 98% of the time. But for some reason some of the tabs will not change the display to block. The div tab with the information is there if I go inspect the page and manually change the display to block. Can anyone help me figure out why this is happening. Thanks Link to comment Share on other sites More sharing options...
JMRKER Posted August 5, 2020 Share Posted August 5, 2020 The code of the link works !00% of the time. What does your code look like? I can view the code of the former, but have no idea what your code looks like. Please include some. BTW, welcome to the forums. :) Link to comment Share on other sites More sharing options...
dane Posted August 9, 2020 Author Share Posted August 9, 2020 Here is my code to create the buttons <?php foreach($array as $x){ if($x !== "0"){ echo('<button class="tablink" onclick="openEvent(event,'. $x . ')">'. "Event ". $x .'</button>'); } } ?> and here is my code to open the tab <script> function openEvent(e, et) { // 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[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(et).style.display = "block"; e.currentTarget.className += " active"; } </script> as I was saying if I inspect the page it will turn all the divs to none and it will also change the active to the correct button but not turn the one I want to block and for some of the pages it works for all the tabs and then for others it doesn't Link to comment Share on other sites More sharing options...
JMRKER Posted August 9, 2020 Share Posted August 9, 2020 I don't know if this is the problem, but you have "tablink" as the className reference in your program but the linked program in your last post uses "tablinks". (note the plural form) I don't know enough about PHP to help with that portion, you don't have the CSS available and your HTML section is missing for comparison purposes. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2020 Share Posted August 9, 2020 The php produces tabs with class 'tablink', so it is different. But the reference to the tab class name matches, so it won't make any difference. You do use only one tab listing per page, don't you? Link to comment Share on other sites More sharing options...
Makwana Prahlad Posted August 25, 2020 Share Posted August 25, 2020 Hello, @dane Please try this code,To Javascript Tabs not working <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div> </body> </html> I hope this code will be useful for you. Thank You. 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