Question

我是HTML编码的新手，我想知道如何在标签标题下方放置另一个标签内容，该内容链接到我按过的标签。

例如，我想将此A TO B函数或B TO A函数放在选项卡页眉/选项卡下。我可以通过将其放在两者之间来实现此目的，但它不会与我想要的选项卡链接。

<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>

例如，看这张图片Example 1 Example 2

P.S。我的朋友正在跟我讨债。

<!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>

Answer 1

您已经创建了标签页，这意味着您应该拥有div-s：标签页内容的容器。因此，您可以在div中添加另一个容器，如下所示：

<div class="tabcontent"><div style="margin-left: --%;">Text under the tab-button</div>

Your Main Tab-content

</div>

如果选项卡按钮的宽度是固定的，那么对于每个选项卡，您都需要在其中写入margin-left: 0%;，margin-left: 25%;，margin-left: 50%;，margin-left: 75%;

但是如果您的制表符宽度以像素为单位，则只需要使用像素margin-left: 123px;

边距在指定方向上设置自由字段。它可以是右边距，顶部边距，底部边距。它的值可以为负：margin-top: -100px-将元素移到顶部。

在样式上，您可以添加position: absolute;，并且div的边距将独立于其他元素。

看到您的代码...

Working code

我添加了：

.bubu{position: absolute;
      background-color: #800000;
      margin-top: 100px;
      padding: 20px;
      }

<div class="bubu" style="margin-left: --%;">TEXT</div>

有一种“更正确”的方法可以解决这个问题，但是要困难得多……
您可以通过Google搜索：CSS :before和CSS :after

如何在与您按下的标签链接的“标签”标题下放置文本？

1 个答案: