CODEWITHSUNDEEP
javascriptjquerycssjquery-tools
Aaron Brewer
Aaron Brewer

Reputation: 3667

jQuery Tools: Tabs: Adding Current Class to List Item?

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

Upvotes: 0

Views: 1491

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37665

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/

Upvotes: 1

nav
nav

Reputation: 3115

Maybe this is what you're looking for:

$clickedTab.addClass('current').siblings('.current').removeClass('current');

UPDATE

Based on your edit I think you may find this section of the documentation helpful: http://flowplayer.org/tools/demos/tabs/anchors.html#second

My above code only changes the style of the tabs it won't actually open the tab you applied the 'current' class to. If the link above proves to be of no use to you, you could attempt the following:

HTML

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#first">Tab 1</a></li>
    <li><a href="#second">Tab 2</a></li>
    <li><a href="#third">Tab 3</a></li>
</ul>

JS

$('.tabs a[href="#second"]').click();   // or use id's

Will open the second tab and handle all the styling etc for you.

Upvotes: 1

Related Questions