代码之家 › 专栏 › 技术社区 › ironmantis7x

如何使选项卡在单击时在html中保持打开状态

tabs html

ironmantis7x · 技术社区 · 4 年前

我有一个html页面,有标签。我希望当我点击标签时,标签下的内容会打开。当我单击选项卡时,选项卡“打开”一秒钟,然后关闭。

怎样才能使这些标签保持打开状态?我已经尝试了W3学校推荐的几种格式化标签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>
    &nbsp;&nbsp;&nbsp;

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

1 回复 | 直到 4 年前

Chaska 4 年前

默认情况下, <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>