I’m trying to create a tabbed web page where new tabs can be added together with content. When the Add tab button is clicked and the prompt is completed, the new tab button is added but the associated content is not displayed.
I built on this W3 Schools example
I added a template for the new tab’s content
In the promptUser handler for the Add tab button a new button is created and added to the tabbar div.
The new button appears to be added OK and its onclick handler does call the openCity function successfully.
The template is used to create associated content and is given a div id to match the button id.
In the openCity function I added an alert to prove that the new content page had been added OK but the problem is that it is not being displayed.
Here is the complete code.
<!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>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<button onclick="promptUser(event)">Add tab</button>
<div id='tabbar' 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>
<template id='Template'>
<div id="Placeholder" class="tabcontent">
<h3>Test</h3>
<p>This is a test.</p>
</div>
</template>
<script>
function btnClick(cityName) {
openCity(event, cityName);
}
function promptUser(evt) {
let gatesetname = prompt("Please enter gate set name");
const btn = document.createElement('button');
const div1 = document.getElementById('tabbar');
btn.id = gatesetname;
btn.innerText = gatesetname;
btn.classList.add("tablinks");
btn.onclick = function(){
btnClick(gatesetname);
};
div1.appendChild(btn);
let temp = document.getElementById('Template');
var cloneTemplate = temp.content.cloneNode(true);
var div = cloneTemplate.querySelector('div.tabcontent');
div.id = gatesetname;
document.body.appendChild(cloneTemplate);
btn.click();
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
alert(tabcontent[i].id);
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>
New contributor
colinp is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.