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')
})
})

Select options dropdown not working on chrome

I have a select list of options that change the content according to the selection. It works fine in MS Edge, IE, and on FireFox except in Chrome. Maybe I am missing something, below are all my code:
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";
}
body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab option {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab option:hover {
background-color: #ddd;
}
.tab option.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<body>
<select class="tab">
<option value="london" class="tablinks" onclick="openCity(event, 'London')">London</option>
<option value="paris" class="tablinks" onclick="openCity(event, 'Paris')">Paris</option>
</select>
<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>
</body>

You shouldn't attach click events directly to <option>s. The way you get the selected option is by listening for the change event on the <select>.
After the change, this in your openCity function, refers to the <select>. I'm getting the selected text like this:
this.options[this.selectedIndex].text // Paris, London, etc.
These values match up with the ids of your .tabcontent <div>s. Then we show the content.
document.getElementById(
this.options[this.selectedIndex].text
).style.display = "block";
document.querySelector('.tab').addEventListener('change', openCity);
function openCity(evt) {
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(
this.options[this.selectedIndex].text
).style.display = "block";
evt.currentTarget.className += " active";
}
body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab option {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab option:hover {
background-color: #ddd;
}
.tab option.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<select class="tab">
<option value="london" class="tablinks">London</option>
<option value="paris" class="tablinks">Paris</option>
</select>
<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>
jsFiddle

You should not use the onClick Event within option Elements. Use the onChange event of the select instead. Try to take selected value using an event. Try this code. This will work fine in chrome also.
<body>
<select class="tab" onchange="openCity(event)">
<option value="london" class="tablinks">London</option>
<option value="paris" class="tablinks">Paris</option>
</select>
<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>
</body>
function openCity(evt) {
var cityName = evt.target.value;
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";
}

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

Display a button content Hi in navigation bar by default when page loads

Please help me in solving the below problem
I have a navigation bar , with 3 buttons :
1. home 2. info 3. restart
info and restart buttons are php pages .
1. home button , displays a content written inside
I want to display the home button content by default when page loads .
Currently how my navigation bar works is , it fetches all 3 tabs content and hides it . It displays the content only when clicking on the buttons .
Below is the code
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();
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.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 */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<body>
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen"><b>Home</b></button>
<button class="tablinks" onclick="openCity(event, 'Info')"><b>Info</b></button>
<button class="tablinks" onclick="openCity(event, 'Restart')"><b>Restart</b></button>
</div>
<div id="Home" class="tabcontent">
<h3><font face="arial" /><u>Information About Web Page</u></h3>
<p>
Hello World !
</p>
</div>
<div id="Info" class="tabcontent">
<h3>Information</h3>
<p>
<?php
include('a.php');
?></p>
</div>
<div id="Restart" class="tabcontent">
<h3><font face="arial" />restart</h3>
<p>
<?php
include('restart.php');
?></p>
</div>
</body>
When i use document.getElementById("defaultOpen").focus(); im not able to open home tab by default when page loads .

Currently, it is showing Hi, until you click another menu item. Then it grabs the altText attribute and displays that text.
Is that what you want?
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";
var defaultOpen = document.getElementById('defaultOpen');
defaultOpen.getElementsByTagName('b')[0].innerHTML = defaultOpen.getAttribute('altTxt');
}
// Get the element with id="defaultOpen" and click on it
//document.getElementById("defaultOpen").click();
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.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 */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<body>
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen" altTxt="Home"><b>Hi</b></button>
<button class="tablinks" onclick="openCity(event, 'Info')"><b>Info</b></button>
<button class="tablinks" onclick="openCity(event, 'Restart')"><b>Restart</b></button>
</div>
<div id="Home" class="tabcontent" style="display: block">
<h3><font face="arial" /><u>Information About Web Page</u></h3>
<p>Hello World !</p>
</div>
<div id="Info" class="tabcontent">
<h3>Information</h3>
<p>
<?php
include('a.php');
?></p>
</div>
<div id="Restart" class="tabcontent">
<h3><font face="arial" />restart</h3>
<p>
<?php
include('restart.php');
?></p>
</div>
</body>

Do this, perform the home click action on after body load.It will auto trigger home click.
Add change your body tag like this
<body onload="openCity(event, 'Home')">
//others code
</body>