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>
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'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.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm new to HTML coding and I want to know how do I put another tab content below the tab header that links to what ever tab I press.
For example, I want to put this A TO B function or B TO A function below the tab header/Tab. I can do this by putting it in between but it doesn't link with the tabs I want it to.
<div id="ATOB" class="tabcontent">
</br></br>
<div id="ATOB_BOX" style="min-width: 500px;max-width: 760px;min-height: 200px;z-index: 999;background-color: #fff;top: 10px;padding: 15px;border-bottom: 1px solid #ccc;"
<div id="ATOB_CONTAINER">
<span id-"ATOB_DESCRIPTION"> Enter the code you want to ATOB </span></br>
<textarea id="ATOB_TEXT" rows= "15" style="width:99%"></textarea></br>
<input type= "button" style="padding: 5px;" id="ATOB_SUBSTRACTEXCESS" value="Remove Javaeval." onclick="ATOB_SUBSTRACTEXCESS()">
<input type= "button" style="padding: 5px;" id="ATOB_ONGOING" value="Change to B" onclick="ATOB_CHANGE()">
<input id="CLEAR_ATOB"style="padding: 5px;" type="button" onclick= "Clear(ATOB_TEXT)" value="Clear text box ">
</div>
<div id="ATOB_result">
<table id="ATOB_TABLE">
<tbody id="ATOB_body"></tbody>
</table>
</div>
<textarea id= "RESULTATOB_TEXT" rows= "15" style="width:50%"></textarea></br>
<input id="ATOB_BUTTON" type="button" onclick= "ATOBCopy()" value="Click to Copy all ">
<input id="CLEAR_BRESULT" type="button" onclick= "Clear(RESULTATOB_TEXT)" value="Clear text box ">
<br>
</div>
</div>
For example look at this pictureExample 1
Example 2
P.S. My friend was trolling me with the derp thing.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
}
#DERP {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
</style>
</head>
<body>
<p>Click on the buttons inside the tabbed menu:</p>
<div id="DERP" class="tabcontent">
<h1>DERP</h1>
<p>DERP is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h1>Paris</h1>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h1>Tokyo</h1>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="Oslo" class="tabcontent">
<h1>Oslo</h1>
<p>Oslo is the capital of Norway.</p>
</div>
<button class="tablink" onclick="Bst('DERP', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="Bst('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="Bst('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="Bst('Oslo', this, 'orange')">Oslo</button>
<script>
function Bst(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>
You've already created tabs, it means, you should have div-s: containers for tab-content. So, you can just add another container in your div, like this:
<div class="tabcontent"><div style="margin-left: --%;">Text under the tab-button</div>
Your Main Tab-content
</div>
If your tab-button's width is in perсents, for each tab you need to write there margin-left: 0%;, margin-left: 25%;, margin-left: 50%;, margin-left: 75%;
But if your tab-width's are in pixels, you just need to play with pixels, margin-left: 123px;
Margin sets the free field in the specified direction. It can be margin-right, margin-top, margin-bottom. And it's value can be negative: margin-top: -100px - will move the element to top.
In style, you can add position: absolute; and the div will be margined, independent from the other elements.
Saw your code...
Working code
I've added:
.bubu{position: absolute;
background-color: #800000;
margin-top: 100px;
padding: 20px;
}
<div class="bubu" style="margin-left: --%;">TEXT</div>
There is "more correct" way to reach this, but it's much more harder...
You can google: CSS :before and CSS :after
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