在HTML選項卡條中創建選定的選項卡-有解無憂

新編輯：感謝 sean-7777 的幫助。我在下面添加了他的代碼，并且該函式在運行代碼片段中按預期作業。但是它在我的頁面中不起作用。我不知道為什么。它可能與框架集有關，但只有將其轉換為 div 和 iframe 才能確定地告訴我。

在嘗試了 Firefox 中的 Web 開發人員工具后，我確定問題出在框架集上。因為 tabstrip 在一個框架中，所以其中的 javascript 在第一次之后永遠不會被執行。將腳本放入框架集中不起作用，因為包含標簽條的框架永遠不知道發生了什么，而標簽條也不知道。我將嘗試將框架集修改為包含 tabstrip 和 iframe 的單個檔案，以在單擊選項卡時包含其他檔案，看看是否能解決問題。

我發現 [這篇文章][1] 可能實際上回答了我的問題，但請愿人使用的是無序串列，而我使用的是 Excel 生成的 HTML 標簽條（并由我進行了大量修改）。我使用 CSS 來創建翻轉效果，它完美無缺。但我缺乏的是一種突出顯示當前選定選項卡的方法。我不確定它是否可以單獨使用 CSS 完成，或者我是否必須使用 JavaScript。

這是標簽條代碼：

// Get all the tabs
const tabs = document.querySelectorAll("td.td1");
// Store the previous selected tab so we know which one to remove the class from
let prevSelected;
// Give each tab code
for (const tab of tabs) {
  // Add a function to run when it is clicked
  tab.addEventListener("click", evt => {
    // Remove the current class from the last selected element
    // On first run, prevSelected is not defined, so we need to check
    if (prevSelected) prevSelected.classList.remove("current");
    // Update prevSelected
    prevSelected = evt.srcElement;
    // Add the current class
    evt.srcElement.classList.add("current");
  });
}

.bold {font-weight:700;}

/* tabstrip */

.body1 {
  background-image: none;
  font-size: 10.0pt;
  font-style: normal;
  font-family: Arial, sans-serif;
  text-decoration: none;
  vertical-align: middle;
}

.td1 {
  background-color: springgreen;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  padding: 0 0 0 0;
}

.td1:hover {
  background-color: lightyellow;
  color: orange;
}

.smaller {
  font-size: small;
}

.anchor {
  text-decoration: none;
  color: darkgreen;
}

.anchor:hover {
  background-color: lightyellow;
  color: orange;
}
.current {background-color:red;}

<BODY class='body1'>
  <TABLE style='border:none;border-spacing:1px'>
    <TR>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet001.htm' target='frSheet'>One-Handed Weapons</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet002.htm' target='frSheet'>Two-Handed Weapons</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet003.htm' target='frSheet'>Ranged Weapons</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet004.htm' target='frSheet'>Ammunition</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet005.htm' target='frSheet'>Shields & Armor</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet006.htm' target='frSheet'>Accessories</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet007.htm' target='frSheet'>Technicks & Magicks</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet008.htm' target='frSheet'>Augments</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet009.htm' target='frSheet'>Items</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet010.htm' target='frSheet'>The Bazaar</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet011.htm' target='frSheet'>Grimoires</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet012.htm' target='frSheet'>Bazaar Packages</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet013.htm' target='frSheet'>Shops</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet014.htm' target='frSheet'>License Board</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet015.htm' target='frSheet'>Lower Half</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet016.htm' target='frSheet'>Upper Half</a>&nbsp;</TD>
    </TR>
  </TABLE>
</BODY>

uj5u.com熱心網友回復：

向元素添加onClick事件偵聽器，并向其添加類。

// Get all the tabs
const tabs = document.querySelectorAll("td.td1");
// Store the previous selected tab so we know which one to remove the class from
let prevSelected;
// Give each tab code
for (const tab of tabs) {
  // Add a function to run when it is clicked
  tab.addEventListener("click", evt => {
    // Remove the current class from the last selected element
    // On first run, prevSelected is not defined, so we need to check
    if (prevSelected) prevSelected.classList.remove("current");
    // Update prevSelected
    prevSelected = evt.srcElement;
    // Add the current class
    evt.srcElement.classList.add("current");
  });
}

/* tabstrip */

.body1 {
  background-image: none;
  font-size: 10.0pt;
  font-style: normal;
  font-family: Arial, sans-serif;
  text-decoration: none;
  vertical-align: middle;
}

.current {
  background-color: red;
}

.td1 {
  background-color: springgreen;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  padding: 0 0 0 0;
}

.td1:hover {
  background-color: lightyellow;
  color: orange;
}

.smaller {
  font-size: small;
}

.anchor {
  text-decoration: none;
  color: darkgreen;
}

.anchor:hover {
  background-color: lightyellow;
  color: orange;
}

<BODY class='body1'>
  <TABLE style='border:none;border-spacing:1px'>
    <TR>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet001.htm' target='frSheet'>One-Handed Weapons</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet002.htm' target='frSheet'>Two-Handed Weapons</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet003.htm' target='frSheet'>Ranged Weapons</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet004.htm' target='frSheet'>Ammunition</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet005.htm' target='frSheet'>Shields & Armor</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet006.htm' target='frSheet'>Accessories</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet007.htm' target='frSheet'>Technicks & Magicks</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet008.htm' target='frSheet'>Augments</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet009.htm' target='frSheet'>Items</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet010.htm' target='frSheet'>The Bazaar</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet011.htm' target='frSheet'>Grimoires</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet012.htm' target='frSheet'>Bazaar Packages</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet013.htm' target='frSheet'>Shops</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet014.htm' target='frSheet'>License Board</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet015.htm' target='frSheet'>Lower Half</a>&nbsp;</TD>
      <TD class='td1 bold smaller'>&nbsp;<a class='anchor' href='sheet016.htm' target='frSheet'>Upper Half</a>&nbsp;</TD>
    </TR>
  </TABLE>
</BODY>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411894.html

標籤：

上一篇：為什么我的影像左上角有一個灰色框，為什么代碼只調整灰色框的大小而不是影像本身？

下一篇：如何設定下拉選擇區域的最大高度？