I have created a set of navigational buttons that switch between sections of the character sheet at the header of my character sheet. The problem is that I cannot seem to figure out how to change the formatting of them depending on which tab is "selected" Back when I was using spans and input checkboxes to handle the navigation buttons this was fairly straight forward ( well as straightforward as that monstrosity of a code snippet used to be..) But when I switched to sheet workers I can no longer use the states of an input button to alter the style of the input sections (cause I just use buttons now). I was wondering if someone could show me an example code of what I need to do in order to alter the formatting. I'm looking for a change in color for hover and for to indicate the active section of the character sheet. My navigation code is as follows, including both the HTML and the SheetWorkers scripts.. <input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character" /> <div> <button type="action" name="act_core" >Core </button> <button type="action" name="act_gear" >Gear </button> <button type="action" name="act_advancements" >Advancements </button> <button type="action" name="act_npc" >NPCS </button> <button type="action" name="act_journal" >Journal </button> <button type="action" name="act_vehicles" >Vehicles </button> <button type="action" name="act_psykana" >Psykana </button> <button type="action" name="act_social" >Social </button> <button type="action" name="act_ship" >Ship </button> <button type="action" name="act_config" >CONFIG </button> <button type="action" name="act_debug" >DEBUG </button> </div> <script> const buttonlist = ["core","gear","advancements", "npc", "journal", "vehicles", "psykana", "social", "ship", "config", "debug"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); </script> Now, I am assuming that I need to do something with the sheet workers to indicate the active tab, probably in the form of a hidden field on the character sheet. But, I am not entirely sure if this is correct. Their may be a better way to do this; not really sure. Also, I am also using similar code for character sheet subsections, so I am hoping for code that wont need to have all kinda of crazy hierarchy, that is to say I'm hoping for code that would be something like: .sheet-navbutton:hover rather than being prefaced by every single parent item on the page, which makes it incredibly hard to duplicate elsewhere on the character sheet, especially inside of repeating sections. If that makes sense. Once again, thanks for the assistance.
