Jump to content

Javascript Tabs not working


dane
 Share

Recommended Posts

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

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

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

  • 3 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...