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
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top