Jump to content

Javascript Tabs not working


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 post
Share on other sites

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 post
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 post
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 post
Share on other sites

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...