Custom character sheet: Can li elements fire roll actions?

Hi all, So I'm starting to make a new version of a character sheet for a game my DM runs. Here's how it looks after an hour of work: Pretty bare bones and the colour scheme is NOT final. So those tabs at the top are <li> elements. I'm intending to have those be clickable, then it changes the content of the blue div beneath it to the relevant part of the character sheet. I've done this before, but in the other iterations, I used buttons to achieve this. Here's code I used in the last version of the character sheet I made: 1 : <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'  /> This is near the top of the HTML, before any actual sheet content 2 : <button type="action" name="act_skills" >Skills</button> Button clicked to change sheet 'tab' 3 : <div class='sheet-skills'> Div for the other sheet 4 : .sheet-tabstoggle[value="skills"] ~ div.sheet-skills This is used in css to change the active sheet So far, I'm struggling to understand how the changes actually work. Full disclosure, I copied this code from either the wiki or a comment post and it worked so I didn't think much further than that at the time. Would it be possible to keep my styled <li> elements and still have them switch the content of the div out or are buttons my best bet for this? Thanks            

The easiest way would be to use basically the same method you already had, just have your Buttons inside the li elements. Create a button for Character, Skills, Inventory, etc. You can make the button styling match the area around. But you could also use a basic css, grid or flex layout to dispense with the li system, and just have the buttons spaced to appear as in your screenshot.

Thanks! I'll try the button idea and see if I can style them the same