0

I found this great tutorial on how to make a tabbed menu in HTML with CSS3 only: http://www.sitepoint.com/css3-tabs-using-target-selector/

The problem is, that no tab appears to be selected on page load. In the comments someone says he has a solution for this and even displays a demo: http://dabblet.com/gist/1892497

But I still don't get how it works. o.O

I basically got some tabs, one background color for them if they are not selected, and another background color for the active one. Now I need the first tab to have the active color right on page load...that doesn't work for me. :-/

Danmoreng
  • 2,367
  • 1
  • 19
  • 32

1 Answers1

0

I think the key is that you need to have a link to the tab id in the tab, and you need an id like id="tab1" on the <section> element.

Screenshot showing the first tab in the example contains a link to #tab1

(Screenshot is from http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html)

Then you can link your users to yourdomain.com/some-page#tab1 and the first tab will be selected.

If you don't want #tabX in the URL for aesthetic reasons, you can use JavaScript to add a .tab-selected class to the first tab after the page loads.

#tabX in the URL works together with the :target CSS selector to "select" the tab.

David Winiecki
  • 4,093
  • 2
  • 37
  • 39
  • (Note the difference between http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html and http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html#tab1) – David Winiecki Mar 20 '14 at 17:35
  • Well, thanks for the explanation, but unfortunatly you got me wrong. That the #tab1 makes the tab active was already clear to me, that I could use that URL too. The problem is that I don't build a website but an HTA app, and therfor the link won't be the same since the filepath won't always be the same. And as I already said someone already found a solution for one tab beeing highlighted at page load without using the direct URL to it, but I didn't understand the way he did the CSS for it... – Danmoreng Mar 21 '14 at 09:29
  • Thanks to your comment I looked into the URL thing again. I had already tried changing the document location onload with Javascript, but it appeared to not be working. Now I noticed it was the window.onload function that wasn't working rather than location.href = "#tab1". Figuring that out it works now! :-) – Danmoreng Mar 21 '14 at 09:52
  • In the dabblet example it seems like they are not using `#tab1`, and it's true that they highlight a particular tab by default on page load without using `#tab1`, but they do use it when switching tabs: http://screencast.com/t/gfvbQzB0jDa (Btw, I just learned you can get a console in an iframe using Chrome, which was handy in this situation: http://stackoverflow.com/questions/7961229/is-there-a-way-to-change-context-to-iframe-in-javascript-console) – David Winiecki Mar 22 '14 at 21:05