【发布时间】：2022-01-15 18:05:53
【问题描述】：
2022 年 2 月 17 日：我花了一段时间，但我弄清楚了发生了什么。每个 TD 都有一个锚点（A 标记），并且 TD 和锚点都有类。锚只有一个类，但它是最后应用的，所以 TD 显然将该类作为其类列表的一部分。因此，当前类被应用于锚标记，而不是 TD。我还没有弄清楚该怎么做。 “当前”类需要在锚类之前应用到 TD，而不是之后。但这可能会影响发生的事情。锚文本颜色可能会覆盖选定的文本颜色，因此我不确定如何纠正此问题。
2022 年 1 月 19 日：我认为这很好，但是直到我开始将它应用到另一个页面时我才注意到的一个问题，我有两行选项卡，其中一些在两侧都有更多空间链接文字。当链接文本占据单元格内的大部分空间时，这种情况就不那么普遍了。
如果您单击链接文本，页面将更新以显示新文档，但选项卡中唯一被隐藏的部分是链接文本。单元格区域的其余部分保持未选择的颜色。
如果您单击链接文本周围的区域，则整个单元格背景会被隐藏，但链接文本颜色不会更改为 hilite 颜色，并且页面不会更新以显示新文档（链接不会被关注)。
脚本正在构建所有 td.td1 类的列表。该链接在其中，但不是同一类。如何让脚本将整个单元格视为单击的内容，并在单击链接或单元格区域时更新单元格和链接文本，以及如何在单元格区域中单击以被视为点击链接？
我正在处理的页面仍然是一个框架集页面。我正在对它做与其他页面相同的事情，但是在这个页面中要处理 33 张工作表，所以我需要一段时间才能将它放到 iframe 页面上。 Here is the link 到现在的页面，这样你就可以看到我在说什么。脚本代码是相同的，对已放置在此线程中的代码所做的任何更改都将对此页面有用。
2022 年 1 月 17 日：最终解决方案：它不起作用，因为脚本需要在页面加载之后运行，而不是之前。最简单的解决方案是将脚本放在表格之后（在结束 body 标记之前），但是（正如 sean-7777 在他的最新评论中指出的那样）您也可以让文档加载器在页面加载之前不运行脚本。我选择将脚本放在表格之后。它适用于页面的框架集和 iframe 版本。现在要弄清楚当你使用后退按钮时如何让hilite重置......
2022 年 1 月 16 日-2：在 Firefox 中使用 Web 开发人员工具后，我发现在加载页面时初次使用后脚本被忽略。我相信这就是它不起作用的原因。
2022 年 1 月 16 日-1：我已将页面从具有单独的 tabstrip 文件的框架集转换为具有 iframe 的单个文档，以包含目标页面和 iframe 下方的 tabstrip 代码。 JavaScript 代码仍然不起作用。
为了进一步解释，我发现 body、iframe 和 table/link css 不会从单独的 css 文件中应用，所以我将样式信息放入 head 部分的样式标签中并且它起作用了。我将使用样式表的代码留在了头部，但注释掉了。 JavaScript 代码也是如此，只是它仍然无法工作，甚至放在 head 部分的脚本标记中。
我的网站上有这两个版本，因此任何阅读本文的人都可以并排查看它们，看看它们看起来是否相同（即使一个是框架集而另一个是 iframe），并且 javascript 代码不起作用.非常感谢任何帮助找出原因。
Frameset versioniFrame version
2022 年 1 月 15 日-3 日：感谢 sean-7777 的帮助。我在下面添加了他的代码，并且该函数在运行代码片段中按预期工作。但是它在我的页面中不起作用。我不知道为什么。它可能与框架集有关，但只有将其转换为 div 和 iframe 才能确定地告诉我。
2022 年 1 月 15 日-2：在 Firefox 中试用 Web 开发人员工具后，我确定问题出在框架集上。因为 tabstrip 在一个框架中，所以其中的 javascript 在第一次之后永远不会被执行。将脚本放入框架集中不起作用，因为包含标签条的框架永远不知道发生了什么，而标签条也不知道。我将尝试将框架集修改为包含 tabstrip 和 iframe 的单个文档，以在单击选项卡时包含其他文档，看看是否能解决问题。
2022 年 1 月 15 日-1 日：我找到了 https://stackoverflow.com/questions/42089472/javascript-change-td-bgcolor-onclick （由于某种原因无法修复链接），这实际上可以回答我的问题，但请愿人正在使用无序列表，而我正在使用由 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'> <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>【问题讨论】：
-
这看起来像是维护的噩梦，尤其是当您必须更新演示文稿时。
-
你是如何实现这个的？它是在 iFrames 中还是类似于“主页”？您能否分享更多代码。
-
David Thomas - 这是最终产品，不，我这样做是为了简化维护。不知道你在说什么。
-
Jonas m - Excel 生成一个框架集。我还没有将其更改为 div/iframe。那即将到来。如果有帮助，我可以添加框架集页面。
标签： javascript html css