Skeleton Tabs don't "activate" clicking on tabs

[lgs]

Hi, during my first try with Skeleton on Rails3, I'm facing some difficulty with Tabs which don't get "ACTIVE" on clicking them. My "haml on rails" generate the following html code http://pastie.org/2244879 do you advise some missing ?

Thanks in advance
Luca G. Soave

[dhg]

Hey -

So your issue is that your markup isn't tied together completely. Skeleton doesn't assume that the order of your tabs is the order of your content (for a number of reasons). You are missing a needed href in your a and a matching id for your .tabs-content li.

<ul class="tabs">
    <li> <a class="active" href="#one">Watchers</a></li>
    <li><a href="#two">Forks</a></li>
    <li><a href="#three">Creation</a></li>
</ul>

<ul class="tabs-content">
    <li id="oneTab" class="active">About Watchers</li>
    <li id="twoTab">About Forks</li>
    <li id="threeTab">About Creations</li>
</ul>'

You also didn't close your li's in your .tabs-content.

Hope that helps out and addresses your issue!

[lgs]

... what if my content ( in "tabs-content" ) is not inside the same document but dynamically generated ?

Like the following for example :

`

• Watchers
• Forks
• Creation

`

... could that works like following ?

`

• Watchers is dynamic content ( api )


• Forks is dynamic content ( api )


• Creations is dynamic content ( api )

'`

[pinktrink]

From the HTML4 specs:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

I'd imagine that you can have slashes in element IDs, but expect odd behavior between different browsers, given that the specs do not explicitly state that it is an allowed character. I personally wouldn't suggest it.

[lgs]

... than how can I tab, if possible, a dynamic content ? I mean an ancor which is not inline # ancor but a relative path like ' / ' which is root slash in my site : http://mysite.com/ ), or also /forks for the http://mysite.com/forks ?

[pinktrink]

Get it via AJAX then insert it into the tab-content LI.