17 Feb 2022: It took me awhile but I figured out what's going on. Each TD has an anchor (A tag) and both the TD and the anchor have classes. The anchor only has one class, but it is being applied last, so the TD apparently has that class as part of its class list. As a result the current class is being applied to the anchor tag, not the TD. I have yet to figure out what to do about this. The 'current' class needs to be applied to the TD before the anchor class, not after. But this may affect what happens. The anchor text color may override the selected text color, and so I am unsure of what to do to correct this.
19 Jan 2022: I thought it was fine, but there is an issue I didn't notice until I started applying this to another page I have that has two rows of tabs and some of them have more space either side of the link text. It wasn't so prevalent when the link text occupied the majority of the space within the cell.
If you click the link text the page gets updated to show the new document, but the only part of the tab that gets hilited is the link text. The remainder of the area of the cell remains the unselected color.
If you click the area around the link text the entire cell background gets hilited but the link text color doesn't change to the hilite color and the page does not get updated to show the new document (the link does not get followed).
The script is building a list of all td.td1 classes. The link is within that but is not the same class. How do I get the script to treat the entire cell as what was clicked and update both the cell and the link text when either the link or the cell area are clicked, and how do I get a click in the cell area to be treated as a click of the link?
The page I am working on is still a frameset page. I am working on doing the same thing with it that I did with the other page, but there are 33 sheets to deal with in this one so it will take me a while to get it to a iframe page. Here is the link to the page as it is now so you can see what I am talking about. The script code is the same and any change made to the code already placed in this thread will be useful for this page.
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...
16 Jan 2022-2: After using the web developer tool in Firefox I have discovered that the script is being ignored after the initial use when the page is loaded. I believe this is why it is not working.
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.
For further explanation, I found that the body, iframe and table/link css would not apply from a separate css file, so I put that style information into style tags in the head section and it worked. I left the code for using the stylesheet in the head but commented out. The same was true of the JavaScript code, except that it still doesn't work, even put into script tags in the head section.
I have both versions on my website so anyone reading this can look at them side-by-side to see that they look the same (even though one is frameset and the other iframe), and that the javascript code is not working. Any help figuring out why is greatly appreciated.
Frameset version iFrame version
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.
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>
