DEV Community 👩‍💻👨‍💻

Discussion on: You don't need... JavaScript to do tabs

Collapse
jamesthomson profile image
James Thomson • Edited on

Or you could just use CSS's :target selector. Not only is this a simpler implementation, but it also supports "deep linking" via the hashed url value.

Example: stackblitz.com/edit/web-platform-2...

Edit: Downside is there doesn't seem to be a way to apply an active state to the tab. So with either approach we can only meet 2/3 of the requirements to make usable tabs. So, once again, this is why we end up turning to JS.

Collapse
jonosellier profile image
jonosellier Author

I like using :target for routing (spoilers for the next article! 🤫) but I also don't have a good way of doing active states nicely.

I was thinking of showing it being done with a bunch of copies of tabs where 1 is manually marked as active with a class so the Tab and Tab Content is swapped based on active state. I decided not to because it's a lot of repetition.