Hello friends I found w3 tab script I used this in my project it perfectly work on my page but I want this tabs in two different panels in single page, two tabs panel not work perfectly only one tab panel works fines. following is code snippet
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();
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<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>
<div id="tabs">
<div class="row">
<div class="col-md-12" style="padding:0px;">
<ul class="tab modal-tab">
<li>Delhi</li>
<li>New York</li>
</ul>
<div id="Delhi" class="tabcontent" style="display:block;">
<h3>OrderDelivered</h3>
<p>Delhi is the capital of India.</p>
</div>
<div id="NewYork" class="tabcontent">
<h3>OrderFailed</h3>
<p>New York is the city of America.</p>
</div>
</div>
</div>
</div>
I want this both of tab panel work fine not only one at a time
Added another specific class for the tab content,
Added another constructor for the functions, and hide the tabs for only clicked tab panel, not all tab panel of the html.
function openCity(evt, cityName, tabContent, tabContentLink) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(tabContent);
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName(tabContentLink);
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();
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<div id="London" class="tabcontent tabcontent-1">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent tabcontent-1">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent tabcontent-1">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<br><br>
<div id="tabs">
<div class="row">
<div class="col-md-12" style="padding:0px;">
<ul class="tab modal-tab">
<li>Delhi</li>
<li>New York</li>
</ul>
<div id="Delhi" class="tabcontent tabcontent-2" style="display:block;">
<h3>OrderDelivered</h3>
<p>Delhi is the capital of India.</p>
</div>
<div id="NewYork" class="tabcontent tabcontent-2">
<h3>OrderFailed</h3>
<p>New York is the city of America.</p>
</div>
</div>
</div>
</div>
Updated (fixed menu tab highlight issue)
function openCity(evt, cityName) {
var i, tablinks;
$(this).parents().children('.tablinks').removeClass('active');
$(this).addClass('active');
$('#'+cityName).parents('.tab-container').children('.tabcontent').removeClass('active');
$('#'+cityName).addClass('active');
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .tablinks.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent.active{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<div class="tab-container">
<div id="London" class="tabcontent active">
<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>
<br><br>
<div id="tabs">
<div class="row">
<div class="col-md-12" style="padding:0px;">
<ul class="tab modal-tab">
<li>Delhi</li>
<li>New York</li>
</ul>
<div class="tab-container">
<div id="Delhi" class="tabcontent active">
<h3>OrderDelivered</h3>
<p>Delhi is the capital of India.</p>
</div>
<div id="NewYork" class="tabcontent">
<h3>OrderFailed</h3>
<p>New York is the city of America.</p>
</div>
</div>
</div>
</div>
</div>
with jquery you can use this method
Related
Haizz.
Hello guys..
I'm learning Web Dev in: https://www.w3schools.com/.
I did a very simple homework here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs
```
<!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>
<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>
```
But.... When I try to exchange the traditional for-loop to for..in loop. It not work?
Ex.
for (i in tabcontent) {
tabcontent[i].style.display = "none";
}
After many time I try to make it work. I've found that all statement follow the first for..in loop will be skip !!!????
It mean the Function will auto-break after a for..in loop. The first for..in loop work as normal, but the rest statement after it is simply skip. The Function break at this point?
If anyone knew this problem please help me to understand it. X__X
The "auto-break" you're seeing is an uncaught exception breaking execution –
you should have your browser's console open to see any errors that occur and are uncaught.
That change yields an
Uncaught TypeError: Cannot set property 'display' of undefined
at openCity (<anonymous>:6:33)
at HTMLButtonElement.onclick (tryit.asp?filename=tryhow_js_tabs:1)
since for..in loops over properties of objects, not array elements as you imagine, and i ends up (as evidenced by console.log(i)) being 0, 1, 2, and then finally length, and tabcontent.length has no style property, so the equivalent of
tabcontent.length.style.display = ...
naturally fails.
You can go with the for in loop. The loop will give you indexes but because you have not converted it to an array you get some extra (unwanted properties) hence the error.
The key is to make the conversion, after that you are safe with the for in loop:
let tabContent = Array.from(document.getElementsByClassName("tabcontent"))
Example proof: https://jsfiddle.net/sqfgb0k6/
<!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>
<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) {
let i, tablinks
let tabContent = Array.from(document.getElementsByClassName("tabcontent"))
for (let i in tabContent) {
tabContent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (let i in tabContent) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
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')
})
})
I have added multiple tabbed sections to my webpage but I am having trouble making sure the second tabbed section also opens up the first tab on load. I am currently following this tutorial from W3Schools and this is my code on W3Schools so far:
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;
}
<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<!--first tab-->
<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><br><br>
<!--second tab-->
<div class="tab">
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, '2')">Paris</button>
<button class="tablinks" onclick="openCity(event, '3')">Tokyo</button>
</div>
<div id="1" 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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
I have managed to create a second tabbed section underneath the first one but I cannot get both tabbed sections to show the first tab on page load at the same time.
Use class-names instead of ids for cityes. Add a "show" class-name to the active content:
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove('show');
}
tablinks = document.getElementsByClassName("tablinks");
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove('active');
}
document.getElementsByClassName(cityName)[0].classList.add('show');
document.getElementsByClassName(cityName)[1].classList.add('show');
var cuttentTabClass = evt.currentTarget.className.split(" ")[1];
console.log(cuttentTabClass);
document.getElementsByClassName(cuttentTabClass)[0].classList.add('active');
document.getElementsByClassName(cuttentTabClass)[1].classList.add('active');
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
.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;
}
.tabcontent.show {
display: block;
}
<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<!--first tab-->
<div class="tab">
<button class="tablinks l" onclick="openCity(event, 'london')" id="defaultOpen">London</button>
<button class="tablinks p" onclick="openCity(event, 'paris')">Paris</button>
<button class="tablinks t" onclick="openCity(event, 'tokyo')">Tokyo</button>
</div>
<div class="tabcontent london">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div class="tabcontent paris">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div class="tabcontent tokyo">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<br><br><br><br><br>
<!--second tab-->
<div class="tab">
<button class="tablinks l" onclick="openCity(event, 'london')">London</button>
<button class="tablinks p" onclick="openCity(event, 'paris')">Paris</button>
<button class="tablinks t" onclick="openCity(event, 'tokyo')">Tokyo</button>
</div>
<div class="tabcontent london">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div class="tabcontent paris">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div class="tabcontent tokyo">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
Here is a jQuery solution. It uses a small (jQuery) plugin. I hope that helps.
/*
* EZ Tabs
* by Razvan Zamfir
*/
! function(i) {
i.fn.eztabs = function(n) {
var a = i.extend({
tabsList: ".ez_tabs",
boxContainer: ".ez_content",
animation: "none",
animationTime: 500,
fullWidthTabs: !0
}, n);
return this.each(function() {
var n = this,
t = a.tabsList,
e = a.boxContainer;
a.fullWidthTabs === !0 && i(t).addClass("fullwidth");
var s = i(n).find(e).children();
i(s).hide(), i(s[0]).show();
var o = i(n).find(t).children("li");
i(o[0]).addClass("active"), i(o).each(function(n) {
i(this).on("click", function() {
i(this).addClass("active"), i(o).not(this).removeClass("active");
var t = i(s[n]);
return "none" === a.animation ? (i(s).hide(), i(t).show()) : "slideUpDown" === a.animation ? (i(s).slideUp(a.animationTime), i(t).slideDown(a.animationTime)) : "slideLeftRight" === a.animation && (i(e).css("overflow", "hidden"), i(s).css({
width: "100%",
display: "none"
}), i(s).animate({
marginLeft: "-110%"
}, a.animationTime), i(t).css("display", "block").animate({
marginLeft: "0"
}, a.animationTime)), !1
})
})
})
}
}(jQuery);
$(function() {
$('.tabset').eztabs({
animation: 'slideUpDown',
animationTime: 200
});
});
.tabset {
max-width: 500px;
margin: 10px 0;
-moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .15);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .15);
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: 14px;
}
ul.ez_tabs {
margin: 0 !important;
padding: 0;
list-style-type: none !important;
height: 31px;
border-bottom: 1px solid #ccc;
}
ul.ez_tabs li {
display: block;
margin: 0 !important;
float: left;
text-align: center;
color: #777;
font-weight: 600;
padding: 0 8px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
cursor: pointer;
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -webkit-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: -o-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: linear-gradient(#ffffff 0%, #e5e5e5 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
ul.ez_tabs li.active {
color: #111;
background: #fff;
border-bottom: 1px solid #fff;
}
.ez_content {
position: relative;
background: #fff;
border: 1px solid #ccc;
border-top: none;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
article {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
color: #222;
background: #fff;
}
article ul {
margin: 0;
}
article p,
article ul li {
line-height: 1.5;
margin: 0;
}
article p {
text-align: justify;
}
/* Full width tabs */
ul.ez_tabs.fullwidth {
display: flex;
}
ul.ez_tabs.fullwidth li {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabset">
<ul class="ez_tabs">
<li>Description</li>
<li>Delivery</li>
<li>Composition</li>
</ul>
<div class="ez_content">
<article>
<h3>London</h3>
<p>London is the capital city of England.</p>
</article>
<article>
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</article>
<article>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</article>
</div>
</div>
<div class="tabset">
<ul class="ez_tabs">
<li>Description</li>
<li>Delivery</li>
<li>Composition</li>
</ul>
<div class="ez_content">
<article>
<h3>London</h3>
<p>London is the capital city of England.</p>
</article>
<article>
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</article>
<article>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</article>
</div>
</div>
You can add your own styles, of course.
You have 2 problems
You have 2 elements with the same id so the code just select the
first
You are using same classes for all tabs and content use different classes name for each panel
You hide all content every time to click on button, you should use separate functions or better make on dynamic function
I was taking a gander at your code. And it looks like the issue is that you are using the same ID for both tabs. ID's should be unique.
As Megabyter said, both ids need to be unique. However, your click function hides all of the 'tabcontent' divs. Therefore, calling .click() for two unique ids will only show the second tab's content (because the second .click() will hide the content shown by the first). I would suggest just adding the class .active to the two tab contents you want to show on page load in your HTML and then adding in your CSS the class display: block to .active. That would also allow you in your function to just add the class .active and not worry about changing the display style in the Javascript.
Edit
You also need some way for your function to distinguish between the two tabbed sections and only change the section clicked. Here is a working example.
I added two container <div>s with num attributes so the function can distinguish them. This number is passed in as the third argument in the openCity() function. The function loops through the two containers, and only edits the container where the number passed into the function equals the num attribute of the container.
The child tab content <div>s and tab links of the correct container are retrieved by calling .getElementsByClassName() for both See here.
Then the function loops through the child tab contents and tab links (only the ones in the correct container <div>) and removes the class .active from them.
Finally, the second parameter was changed to a number (instead of an id). The number is equal to 1, 2, and 3 respectively for both sets of tab links. This number is used to find the correct child tab link and its corresponding tab content within the correct container and add the class .active to them.
P.S. You do not have to define the variable i for a for loop. for loops do it all for you. while loops require defining the variable beforehand and incrementing it within the loop after every iteration.
I've this tabs here:
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[i].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[i].className = tablinks[i].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";
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* 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;
}
<!-- Tab links -->
<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>
<!-- Tab content -->
<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>
How can I refer now via the URL for example with a # to a specific tab? So that when I click a tab, the URL changes to the tab and when I reload the page or share the URL that the specific tab gets opened?
You can extract an anchor from an URL like so:
function getAnchor() {
return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}
Then on page load you can set the active tab to the respective anchor.
location.hash.substr(1) will return the same as above.
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>