New edit: 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.
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.
I found [this article][1] 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.
Here is the tabstrip code:
// 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>CodePudding user response：
Add a onClick event listener to the element, and add a class to it.
// 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'> <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>