How do you put text under Tab header that links with the tab you press?

Foollor

New Member
#1
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.

I can see the tab content is on top but how do I put the content below the tab too that is linked? P.S. I do not know how to put code below the header how to link to the tabbed header. I could just put @body the content I want.For example, a A TO B function or B TO A function but it doesn't link with the tabs I want it to.
Mã:
<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 picture Example 1 Example 2
P.S. My friend was trolling me with the derp thing.
Mã:
<!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>
 

Admin

Administrator
Thành viên BQT
#2
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:
Mã:
<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:
Mã:
.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
 
Top