tabstrip “button” hilite

**17 Feb 2022** I have figured out that the ‘current’ class is not being applied to the TD itself. For some reason it is only being applied to the link text (A tag). When you move the mouse pointer over the tabs, you see that the entire TD is hilited. This is because I had to apply the colors to both the TD and the A. I’ve been doing some experimenting but have not yet figured out how to make the script do the same thing.

**17 Jan 2022-2:** 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 in stackoverflow) 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…

**17 Jan 2022-1:** I got some help on stackoverflow, and the javascript provided works in the sandbox on that site but does not work on my webpage. So far I’ve had no luck with getting it to work, and it seems that it’s running when the page is loaded, but is not executed after that. I am perplexed as to why it works on stackoverflow but not on my webpage.

Here is the script:
`// 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”);
});
}
`
I also made a new version of the page that uses an iframe instead of a frameset. The script doesn’t work in either version. Here are links to both versions. Hopefully someone can help me figure out why it isn’t working.

[Frameset version](https://wayneca.neocities.org/FFXII/items.html)
[Tabstrip for Frameset](https://wayneca.neocities.org/FFXII/Items/tabstrip.htm)
[iFrame version](https://wayneca.neocities.org/FFXII/items1.html)

**14 Jan 2022:** I have created a table-based webpage using Excel. Excel creates a frameset page that has 2 frames. The upper frame is where the “sheet” documents are loaded and the lower frame is where the tabstrip is loaded. What the resulting tabstrip doesn’t do is hilite the currently selected tab the same way Excel does in a workbook. I would like to mimic this behavior, but I have no idea where to start. It has been many years since I played around with JavaScript. Excel uses JavaScript to control the tabstrip, so I believe it would be an added function that would keep track of the currently selected tab, setting it as the previous tab when a new tab is selected in order to deselect that tab when hiliting the new tab, but that is about as far as I can take it. Any help is appreciated.

Edit: I have been studying the javascript code generated by Excel hoping to get a clue to no avail. All it has done is caused me to have more questions.

What is the iIEVer property and why does my browser throw an uncaught exception error when it encounters it?
Why does the fnupdatetabs function seem to call itself if iIEVer is <4?

`function fnUpdateTabs()
{ if (parent.window.g_iIEVer>=4) {
if (parent.document.readyState==”complete”
&& parent.frames[‘frTabs’].document.readyState==”complete”)
parent.fnSetActiveSheet(15);
else
window.setTimeout(“fnUpdateTabs();”,150);
}
}
`
This function occurs in each sheet file, and I think this may have something to do with the error since the main javascript is in the frameset page. The upper frame does get updated with the file selected when you click the link in the tabstrip, but nothing happens in the tabstrip that is visible, so I don’t know what is being updated (or if anything even is being updated due to the error).

Edit 2: I looked at the JavaScript generated by Excel and realized that it does nothing. I guess it only applies to Outlook or some older versions of Internet Explorer. I was able to achieve roll-over using CSS alone, but hiliting the currently selected link tab is not happening. I don’t know if it can be done solely with CSS, which is why I asked this here first. I have no clue how to even begin writing something like this and could use the help.

Also in #JavaScript _↴