Develop Reference

HTML- Content not displayed properly in tabs

I am very new to front end development and stuck while working with tabs in HTML. I am trying to display content in tabs and somehow I an able to do it but it only works if any of the tab button is pressed. The entire content shows up as the page loads and eventually as the tab buttons are clicked, it works fine.
Can somebody please correct me?
https://jsfiddle.net/pndmyaf7/
CSS
.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;
}
.tab-content>.tab-pane {
height: 1px;
overflow: hidden;
display: block;
visibility: hidden;
}
.tab-content>.active {
height: auto;
overflow: auto;
visibility: visible;
}
HTML
<fieldset class="tab" style="margin-top: 150px ";>
<legend align="center">Exposure Breakdown</legend>
<button class="tablinks" onclick="openTab(event, 'exposure_by_asset_type')">Asset Class</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_leh_sector')">LEH Sector</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_gics_sector')">GICS Sector</button>
</fieldset>
<div id="exposure_by_asset_type" class="tab-content">
<h3>Test0</h3>
</div>
<div id="exposure_by_leh_sector" class="tab-content">
<h3>Tes1</h3>
</div>
<div id="exposure_by_gics_sector" class="tab-content">
<h3>Test2</h3>
</div>
JS
function openTab(evt, chart_id) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
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(chart_id).style.display = "block";
evt.cur`enter code here`rentTarget.className += " active";
}

Set the visibility of the content initially to none. You can simply add this to your css file:
.tab-content {
display: none;
}

Multiple tab sections with active tab issue

I created multiple tab classes to perform differently, but after all the changes I still seem to be facing issues with active tab function, like in the version as I select other tabs, the previous tabs don't hide, they just keep showing one under the other.
I have been trying to find a solution, but I have been stuck here for days.
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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent2");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks2");
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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen2").click();
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent3");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks3");
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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen3").click();
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;
}
.tabcontent2 {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent3 {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">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>
<br><br><br>
<div class="tab">
<button class="tablinks2" onclick="openCity(event, 'Russia')" id="defaultOpen2">Russia</button>
<button class="tablinks2" onclick="openCity(event, 'Bombay')">Bombay </button>
<button class="tablinks2" onclick="openCity(event, 'Tibet')">Tibet</button>
</div>
<div id="Russia" class="tabcontent2">
<h3>Russia</h3>
<p>Russia is the capital city of England.</p>
</div>
<div id="Bombay" class="tabcontent2">
<h3>Bombay</h3>
<p>Bombay is the capital of France.</p>
</div>
<div id="Tibet" class="tabcontent2">
<h3>Tibet</h3>
<p>Tibet is the capital of Japan.</p>
</div>
<br><br><br>
<div class="tab">
<button class="tablinks3" onclick="openCity(event, 'Rome')" id="defaultOpen3">Rome</button>
<button class="tablinks3" onclick="openCity(event, 'Hungry')">Hungry </button>
<button class="tablinks3" onclick="openCity(event, 'Tutupani')">Tutupani</button>
</div>
<div id="Rome" class="tabcontent3">
<h3>Rome</h3>
<p>Rome is the capital city of England.</p>
</div>
<div id="Hungry" class="tabcontent3">
<h3>Hungry</h3>
<p>Hungry is the capital of France.</p>
</div>
<div id="Tutupani" class="tabcontent3">
<h3>Tutupani</h3>
<p>Tutupani is the capital of Japan.</p>
</div>
</body>
</html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="tab">
<button class="tablinks active" data="London">London</button>
<button class="tablinks" data="Paris">Paris</button>
<button class="tablinks" data="Tokyo">Tokyo</button>
</div>
<div class="tabcontent">
<div id="London" class="content active">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="content">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="content">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</body>
</html>
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 {
border: 1px solid #ccc;
border-top: none;
}
.content {
padding: 6px 12px;
display: none
}
.content.active {
display: block;
}
let tabs = document.querySelectorAll('.tablinks');
let tabContents = document.querySelectorAll('.content');
tabs.forEach(item => {
item.addEventListener('click', event => {
tabs.forEach(btn => btn.classList.remove('active'))
event.target.classList.add('active')
tabContents.forEach(tab => tab.classList.remove('active'))
document.querySelector("#"+event.target.getAttribute('data')).classList.add('active')
})
})

How to display all the tabcontent in single tab menu(ALL)?

This is the example of tab menu please check below, what I'm trying to do when I clicked the button ALL it will display all the tabcontent and each tab content has its own tab menu. TIA!
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";
}
.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;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
</head><body><div class="tab"><button class="tablinks" onclick="openCity(event, 'All')">All</button><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="All" class="tabcontent"></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></body></html>

Just add a condition in the beginning for the "All" arguments and display all tabcontent
See code snippet
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
if (cityName === 'All') {
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "block";
}
} else {
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
evt.currentTarget.className += " active";
}
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: block;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'All')">All</button>
<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="All" class="tabcontent">
</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>

You need to give the content and tab content their own ids. Then cause the tab dropdown to become active after the tab in the menu is clicked. What it looks like to me at the moment is that you are trying to activate everything all at once.
I personally would use classes for this instead of ids for the sake of selection.

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
Give the button with the 'All' an id of id="defaultOpen" THEN add the above line outside the onClick function like this
<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";
}
document.getElementById("defaultOpen").click();
</script>
Hope it helps. Here is the link

How to change url when using include related html page

How to change url path, while using include html method at javascript in inner tab container.
Am using single page layout in my web site, and used tab style, each tab have own html page with include method.
I have attached my sample file, Please suggest how to url path changed without refreshing page.
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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// page load
document.getElementById("Submenu1").innerHTML='<object type="text/html" data="submenu1.html" ></object>';
document.getElementById("Submenu2").innerHTML='<object type="text/html" data="submenu2.html" ></object>';
document.getElementById("Submenu3").innerHTML='<object type="text/html" data="submenu3.html" ></object>';
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Submenu1')" id="defaultOpen">SubMenu 1</button>
<button class="tablinks" onclick="openCity(event, 'Submenu2')">SubMenu 2</button>
<button class="tablinks" onclick="openCity(event, 'Submenu3')">SubMenu 3</button>
</div>
<div id="Submenu1" class="tabcontent">
<h1>external submenu1.html page here</h1>
</div>
<div id="Submenu2" class="tabcontent">
<h1>external submenu2.html page here</h1>
</div>
<div id="Submenu3" class="tabcontent">
<h1>external submenu3.html page here</h1>
</div>
I Hope, will understand my request, sorry for poor english.

You can use window.location.hash = "#"+cityName; If you want change url without refreshing page.
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";
window.location.hash = "#"+cityName;
}

Using Javascript and tabs to change page content

I am trying to create some sort of script that will change the certain text when I go to a new tab. I am a noobie to Javascript and okayish with HTML and CSS.
Here is the link to my work so far:
https://jsfiddle.net/gbjwn08y/
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
</style>
</head>
<body>
<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>
<div id="Oslo" class="tabcontent">
<h3>Oslo</h3>
<p>Oslo is the capital of Norway.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
<p>
This text right here
</p>
<script>
function openCity(cityName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
So as you can see, I have the tabs working with the text. I need the "This text right here" to change depending on which tab is clicked.
I am also going to make a preset font using for "This text right here".
Any help would be greatly appreciated

You can create an element for each text block you want to show, add a class to it that matches the cityName it's associated with, and when you click on a tab, show the text block that has the cityName in it's class and hide the rest.
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
.text {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<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>
<div id="Oslo" class="tabcontent">
<h3>Oslo</h3>
<p>Oslo is the capital of Norway.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
<p class="Oslo text">
oslo
</p>
<p class="Paris text">
paris
</p>
<p class="Tokyo text">
tokyo
</p>
<p class="London text show">
london
</p>
<script>
function openCity(cityName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
var texts = document.getElementsByClassName('text');
for (var i = 0; i < texts.length; i++) {
if (texts[i].classList.contains(cityName)) {
texts[i].classList.add('show');
} else {
texts[i].classList.remove('show');
}
}
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

There are many ways to approach this. Since you haven't mentioned what change you want your text to make, I just assume text in <p> to be any strings. You may add two more simple functions to approach this:
function changeText(newText) {
let text = document.getElementById('text');
text.innerHTML = newText;
};
function handleTabClick(cityName, elmnt, color, newText) {
openCity(cityName, elmnt, color);
changeText(newText);
}
In this case, each of your function will be in charge of only one thing, which might be better for debugging and future editing.
After this, take two more steps:
add id="text" to <p> element
change onClick handlers for your buttons to be handleTabClick and give corresponding arguments.
To see it works, click here

Add an id to the element you want to change, for example <p id="test"> and then add the following:
document.getElementById('test').innerHTML = cityName;
after:
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
This will replace the text with the city name. Hopefully you can further customize to your needs.

Try this:
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
</style>
</head>
<body>
<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>
<div id="Oslo" class="tabcontent">
<h3>Oslo</h3>
<p>Oslo is the capital of Norway.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
<p id="city">
I need this text to change
</p>
<script>
function openCity(cityName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
var s = document.getElementById("city");
s.innerHTML = cityName;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>