Menu
displaying some tabs. while html page load on browser and display the content of it so it should display first tab information because it is set active. but active tab not displaying its content they are working after click on the tab. i simply want while i set active on any tab it should display its content without clicking on them. here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.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;
display:block;
}
/* 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;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div id="Description" class="tabcontent">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</body>
</html>
<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>here you can see. after clicking on the tab the content of its tabs it displaying even i used active class on the first tab. i just simply want those tab should display its content which is set by active without clicking on it.
373
Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.
The tab character can be inserted by holding the Alt and pressing 0 and 9 together.
Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. Approach: In the body tag create some tabs under the div tag with a Custom-Data-Attribute that holds the id of the content.
There is no tab element in HTML and to insert a tab in HTML documents, you should include other HTML elements, alongside CSS attributes and JavaScript functions. In fact, the HTML tag for tab is something that has not been introduced by HTML yet.
Add style="display: block;" to your tabcontent div to show your default div.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.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;
display:block;
}
/* 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;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div id="Description" class="tabcontent" style="display: block;">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</body>
</html>
<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>You are missing display:block in active class and also you are not applying to the first element.
add class
.active {
display: block
}
and
apply
<div id="Description" class="tabcontent active">//added active
<h3>Description</h3>
</div>
.sight_img {
height: 80%;
width: 100%;
}
.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;
display: block;
}
/* 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;
}
}
.active {
display: block
}<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div id="Description" class="tabcontent active">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</body>
</html>
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
