我有一个带有标签的html页面。我希望在单击选项卡时打开选项卡下的内容。当我单击选项卡时,选项卡“打开”一秒钟,然后关闭。
使这些标签保持打开状态的正确方法是什么?我尝试了W3 Schools建议中列出的几种格式化选项卡html代码的方法,但我似乎仍然无法使其正常运行。
这是我的html代码:
function openTabs(evt, tabName) {
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(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
.active,
.collapsible:hover {
background-color: #f1f1f1;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
textarea {
resize: none;
overflow-y: scroll;
overflow-x: scroll;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 2px;
}
th {
text-align: left;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #fff;
background-color: #fff;
width: 595px
}
/* Style the buttons inside the tab */
.tab button {
background-color: #fff;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 12px 14px;
transition: 0.3s;
font-size: 15px;
}
/* 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;
}
<!DOCTYPE html>
<html>
<body>
<head>
<meta name="viewport" content="width=device-width" initial-scale="1" charset="UTF-8">
</head>
<h3>API Test (v 0.1 alpha)</h3>
<form id="api-test__form">
<label for="protocol">protocol</label>
<select name="restcall" id="protocol">
<option value="get">GET</option>
<option value="put">PUT</option>
<option value="post">POST</option>
<option value="delete">DELETE</option>
</select>
<label for="uri"> url: </label>
<input type="text" id="uri" name="uri" size="54" />
<br /><br />
<u>Advanced</u>
<div class="tab">
<button class="tablinks" onclick="openTabs(event, 'Authorization')">Authorization</button>
<button class="tablinks" onclick="openTabs(event, 'Header')">Header</button>
<button class="tablinks" onclick="openTabs(event, 'Body')">Body</button>
</div>
<div id="Authorization" class="tabcontent">
<u>Authorization</u>
<p>London is the capital city of England.</p>
</div>
<div id="Header" class="tabcontent">
<u>Header</u>
<table style="width:100%">
<tr>
<th>key</th>
<th>value</th>
<th>description</th>
</tr>
<tr>
<td> X </td>
<td> X </td>
<td> X </td>
</tr>
</table>
</div>
<div id="Body" class="tabcontent">
<u>Body</u>
<p>Tokyo is the capital of Japan.</p>
</div>
<br /><br />
<input id="clickMe" input type="submit" value="Send" />
<br /><br />
</form>
<br />
<textarea id="resultcode" name="resultcode" rows="1" cols="80" resize="none">Response Code</textarea>
<br />
<textarea id="output" name="output" rows="30" cols="80" resize="none">Response Data</textarea>
</body>
</html>
默认情况下,<button>
将在单击时提交表单。您可以<a>
改用。
<a class="tablinks" onclick="openTabs(event, 'Authorization')">Authorization</a>
<a class="tablinks" onclick="openTabs(event, 'Header')">Header</a>
<a class="tablinks" onclick="openTabs(event, 'Body')">Body</a>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句