I'm in the process of creating a basic tabbed interface, but I've hit a roadblock. Everything is functioning correctly, except for setting the default tab on page load.
What I would like to achieve is for tab-1 to be visible when the page loads. Is there a way to accomplish this using only CSS, without relying on jQuery?
Below is the code snippet:
<div class='tabs'>
<ul class='horizontal'>
<li><a href="#tab-1">General</a></li>
<li><a href="#tab-2">Showcase Box</a></li>
</ul>
<div id='tab-1' class="tab"> Tab 1 Content Here </div>
<div id='tab-2' class="tab"> Tab 2 Content Here </div>
CSS
.tabs div:not(:target) {
display: none;
}
.tabs div:target {
display: block;
}