Jump to content
Sign in to follow this  
Fellucca

Tab Menu

Recommended Posts

I implemented this Tab menu and it works great

https://www.w3schools.com/howto/howto_js_tabs.asp

However, when I try to add the code as instructed to make the first tab open when the page loads I cannot get it to work.

My html is this:

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Cultivate')" id="defaultOpen">Cultivate</button>
  <button class="tablinks" onclick="openCity(event, 'Weed')">Weed</button>
  <button class="tablinks" onclick="openCity(event, 'Mulch')">Mulch</button>
  <button class="tablinks" onclick="openCity(event, 'Seed')">Seed</button>
</div>

<!-- Tab content -->
<div id="Cultivate" class="tabcontent">
  <p>When easily rolled back and forth over the ground, the Spintiller digs then lifts the soil just an inch or two creating the optimal condition for water, air, and nutrient penetration.</p>
</div>

<div id="Weed" class="tabcontent">
  <p>With a simple flip, the Spintiller’s narrow path is great for loosening and pulling weeds,lessening the need for harmful weedicides. Use this in and around your precious plants and vegetables reducing root, leaf and stalk damage.</p>
</div>

<div id="Mulch" class="tabcontent">
  <p>The Spintiller is also perfect for dressing your mulch beds. It does quick and easy work of turning over mulch without tossing it all over the place – invigorating your beds and keeping your mulch healthy looking.</p>
</div>

<div id="Seed" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>
</div>

And my JS is this:

function openCity(evt, cityName) {
  // 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 button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Any help would be appreciated.

Share this post


Link to post
Share on other sites

You've lost some code to the automatic forum formatter. Please edit your post to use the code block feature.

XcQfW3F.png

Share this post


Link to post
Share on other sites

Hello , @Fellucca

Please try this code,To Tab Menu

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
</body>
</html>

I hope this code will be usefull.

Thank You.

 

Share this post


Link to post
Share on other sites

I hope this is the right place. I don't want to start a new topic with a related topic already present. I have used the tab how-to and it worked brilliantly first time off. I have amended the code to provide a "tabs within a tab" feature. That part works great also but I'm unsure how to cause the currently open tab to close upon clicking it again (this is preferential). Most importantly, I'm having a problem where, if I click one of the tabs within the tab, that "sub tab" stays, even when switching back to the other "main tab" (the one that does not contain the "sub tabs". I will paste my amended code below and hope that there is something that can be divulged.

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {font-family: Arial;}

		/* Style the tab */
		.tab {
			overflow: hidden;
			border: 1px solid #ccc;
			background-color: #f1f1f1;
		}

		/* Style the buttons inside the tab */
		.tab button {
			background-color: inherit;
			float: left;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 14px 16px;
			transition: 0.3s;
			font-size: 17px;
		}

		/* Change background color of buttons on hover */
		.tab button:hover {
			background-color: #ddd;
		}

		/* Create an active/current tablink class */
		.tab button.active {
			background-color: #ccc;
		}

		/* Style the tab content */
		.tabcontent {
			display: none;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-top: none;
		}

		/* Style the tab content */
		.subtabcontent {
			display: none;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-top: none;
		}
	</style>
</head>
<body>
	<h2>NEST Health Report</h2>
	<div class="tab">
		<button class="tablinks" onclick="openMainCategory(event, 'hardware')">Hardware</button>
		<button class="tablinks" onclick="openMainCategory(event, 'software')">Software</button>
	</div>
	<div id="hardware" class="tabcontent">
		<h3>Hardware</h3>
		<p>This will contain a list of all hardware diagnostics</p>
		<p>It will show disk usage, RAM total, CPU total, uptime, etc</p>
	</div>
	<div id="software" class="tabcontent">
		<div class="tab">
			<button class="subtablinks" onclick="openSubCategory(event, 'ant')">ANT</button>
			<button class="subtablinks" onclick="openSubCategory(event, 'marci')">MARCI</button>
			<button class="subtablinks" onclick="openSubCategory(event, 'java')">JAVA</button>
		</div>
		<h3>Software</h3>
		<p>This will show all information for all the various version of software</p> 
	</div>
	<div id="java" class="subtabcontent">
		<h3>JAVA</h3>
		<p>What's the status of JAVA?</p>
		<p>Are the links good?</p>
		<p>What is it using (OpenJDK|OracleJDK)?</p>
	</div>
	<div id="ant" class="subtabcontent">
		<h3>ANT</h3>
		<p>What version of ANT is installed?</p>
		<p>Maybe it's not installed</p>
	</div>
	<div id="marci" class="subtabcontent">
		<h3>MARCI</h3>
		<p>Is MARCI "installed"?</p>
		<p>Is MARCI daemon running?</p>
		<p>What collector?</p>
	</div>
	<script>
		function openMainCategory(evt, mainCategoryName) {
			var i, tabcontent, tablinks;
			tabcontent = document.getElementsByClassName("tabcontent");
			for (i = 0; i < tabcontent.length; i++) {
				tabcontent[i].style.display = "none";
			}
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}
			document.getElementById(mainCategoryName).style.display = "block";
			evt.currentTarget.className += " active";
		}
		function openSubCategory(evt, subCategoryName) {
			var i, subtabcontent, tablinks;
			subtabcontent = document.getElementsByClassName("subtabcontent");
			for (i = 0; i < subtabcontent.length; i++) {
				subtabcontent[i].style.display = "none";
			}
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}
			document.getElementById(subCategoryName).style.display = "block";
			evt.currentTarget.className += " active";
		}
	</script>
</body>
</html> 

 

Share this post


Link to post
Share on other sites

I'm unclear of the second part of your question,
but you can fix the first part with the following change.

Add the following to the last line of the openMainCategory function:

	evt.currentTarget.className += " active";
  openSubCategory(null,'');
}

 

Share this post


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...
Sign in to follow this  

×
×
  • Create New...