2022 年 2 月 17 日：我花了一段时间，但我弄清楚发生了什么事。每个 TD 都有一个锚点（A 标签），并且 TD 和锚点都有类别。锚点只有一个类，但它是最后应用的，因此 TD 显然将该类作为其类列表的一部分。因此，当前类将应用于锚标记，而不是 TD。我还没有弄清楚该怎么办。 “当前”类别需要在锚点类别之前（而不是之后）应用于 TD。但这可能会影响发生的事情。锚文本颜色可能会覆盖所选的文本颜色，因此我不确定如何纠正此问题。
2022 年 1 月 19 日：我认为这很好，但有一个问题我没有注意到，直到我开始将其应用到我拥有的另一个页面，该页面有两行选项卡，其中一些选项卡在链接文本的两侧都有更多空间。当链接文本占据单元格内的大部分空间时，这种情况就不那么普遍了。
如果您单击链接文本，页面将更新以显示新文档，但选项卡中唯一获得 hilit 的部分是链接文本。单元格的其余区域保持未选定的颜色。
如果您单击链接文本周围的区域，则整个单元格背景都会变为 hilite，但链接文本颜色不会更改为 hilite 颜色，并且页面不会更新以显示新文档（不会跟踪链接）。
该脚本正在构建所有 td.td1 类的列表。该链接位于其中，但不是同一类。如何让脚本将整个单元格视为单击的内容，并在单击链接或单元格区域时更新单元格和链接文本，以及如何将单元格区域中的单击视为单击链接？
我正在处理的页面仍然是一个框架集页面。我正在对它做与对其他页面所做的相同的事情，但是这个页面有 33 个工作表需要处理，所以我需要一段时间才能将其转到 iframe 页面。链接在这里到现在的页面，这样你就可以看到我在说什么。脚本代码是相同的，对此线程中已放置的代码所做的任何更改都对该页面有用。
17 Jan 2022: Final solution: It wasn't working because the script needs to run *after* the page loads, not before. The easiest solution is to put the script after the table (before the closing body tag), but (as sean-7777 pointed out in his latest comment) you can also have the document loader not run the script until the page has loaded. I chose to put the script after the table. And it works in both the frameset and iframe versions of the page. Now to figure out how to get the hilite to reset when you use the back button...
2022 年 1 月 16 日：在 Firefox 中使用 Web 开发人员工具后，我发现在加载页面时首次使用后脚本被忽略。我相信这就是它不起作用的原因。
16 Jan 2022-1: I have converted the page from a frameset with a separate tabstrip file to a single document with an iframe to contain the target pages and the tabstrip code below the iframe. The JavaScript code still does not work.
为了进一步解释，我发现 body、iframe 和 table/link css 不适用于单独的 css 文件，因此我将该样式信息放入 head 部分的样式标签中，并且它起作用了。我将使用样式表的代码留在了头部，但注释掉了。 JavaScript 代码也是如此，只是它仍然不起作用，即使将其放入 head 部分的 script 标签中。
我的网站上有这两个版本，因此任何阅读本文的人都可以并排查看它们，看看它们看起来是否相同（即使一个是框架集，另一个是 iframe），并且 javascript 代码不起作用。非常感谢任何帮助找出原因的帮助。
车架版本 iFrame版本
15 Jan 2022-3: Thanks to sean-7777 for the help. I added his code below and the function works as expected here in the Run Code Snippet. However it does not work in my page. I don't know why. It may be related to the frameset, but only converting that to a div and a iframe will tell me for sure.
15 Jan 2022-2: After experimenting with the web developer tools in Firefox I have determined that the issue is the frameset. Because the tabstrip is in a frame, the javascript in it never gets executed after the first time. Putting the script in the frameset doesn't work because the frame containing the tabstrip never knows what is happening and tabstrip never knows either. I am going to try modifying the frameset to a single document containing the tabstrip and a iframe to contain the other documents when a tab is clicked and see if that cures the problem.
15 Jan 2022-1: I found https://stackoverflow.com/questions/42089472/javascript-change-td-bgcolor-onclick (can't fix the link for some reason) which may actually answer my question, but the petitioner was using an unordered list and I am using a HTML tabstrip generated by Excel (and heavily modified by me). I have used CSS to create a rollover effect and it works flawlessly. But what I lack is a way to have the currently selected tab highlighted. I'm not sure if it can be done solely with CSS or if I have to use 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'> <a class='anchor' href='sheet001.htm' target='frSheet'>One-Handed Weapons</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet002.htm' target='frSheet'>Two-Handed Weapons</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet003.htm' target='frSheet'>Ranged Weapons</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet004.htm' target='frSheet'>Ammunition</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet005.htm' target='frSheet'>Shields & Armor</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet006.htm' target='frSheet'>Accessories</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet007.htm' target='frSheet'>Technicks & Magicks</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet008.htm' target='frSheet'>Augments</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet009.htm' target='frSheet'>Items</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet010.htm' target='frSheet'>The Bazaar</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet011.htm' target='frSheet'>Grimoires</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet012.htm' target='frSheet'>Bazaar Packages</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet013.htm' target='frSheet'>Shops</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet014.htm' target='frSheet'>License Board</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet015.htm' target='frSheet'>Lower Half</a> </TD>
<TD class='td1 bold smaller'> <a class='anchor' href='sheet016.htm' target='frSheet'>Upper Half</a> </TD>
</TR>
</TABLE>
</BODY>
