Question

Stackoverflow,

I am working with the Tabs via the Jquery Tools: Tabs system and cannot seem how to figure out how to add the CURRENT class to a list item that IS NOT the first item in the list without the class being applied to both the first item and whatever LIST ITEM I throw it on… Any ideas anyone?

http://flowplayer.org/tools/demos/tabs/index.html

Thank you very much,
Aaron

EDIT:
I do not have the JavaScript/jQuery Code for the jQuery Tools: Tabs System… Because I am calling it from CDN:

http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js

But.

This is what I have in HTML.

<ul class="tabs">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
    <li><a href="#">Fifth</a></li>
  </ul>

If I can explain it a little more better it would have to be something like this:
The jQuery tabs system adds the class (current) to the first tab hence the first List Item by default in our case “FIRST”. What I am wanting to do is add the current class to a different List Item for example “SECOND”. But this is where my question comes in, what via jQuery, should I do to stop the adding of the class “current” to the first list item by default, so I may add “current” to another LIST ITEM, and then when clicked on other LIST ITEMs apply the current class.

Does that make sense? I am sorry, this is a little more difficult to explain without having the default RAW jQuery File.

Thank you again,
Aaron

Answer 1

Using the HTML you have provided and the code from jquerytools (as linked to in your question), I am able to reproduce the tab system without the problem you are having:

JSFiddle: http://jsfiddle.net/syG2Q/

It may be that you need to update to the latest version of JQuery.

If this is not the case then maybe you could reproduce your bug in a JSFiddle for us (feel free to use mine as a working example).

Edit

Ok, I believe I misunderstood your question when I read it.

@nav linked you to some useful documentation: http://flowplayer.org/tools/demos/tabs/anchors.html#second

According to that documentation, you need to add a name to the href of your anchor tags and then call this accordingly:

<ul class="tabs">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
    <li><a href="#fourth">Fourth</a></li>
    <li><a href="#fifth">Fifth</a></li>
</ul>

And in your javascript on page load:

location.hash = "second";

JSFiddle: http://jsfiddle.net/syG2Q/2/