2

Once again, I have a question about jQuery, but I'm doing my best to learn, but sometimes tutorials don't give me everything I need.

I'm trying to make a set of tabs work, however, nothing seems to be working..

Here's the code I'm working with:

HTML:

 <!-- TAB SECTION --> <div id="tab_container"> <ul id="tab_list"> <li><a class="how_on" href="#how">How</a></li> <li><a class="why" href="#why">Why</a></li> <li><a class="what" href="#what">What</a></li> <li><a class="who" href="#who">Who</a></li> <li><a class="when" href="#when">When</a></li> </ul> <img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /> </div> <!-- HOW --> <div class="tabs"> <div class="tab" id="how"> <p><strong>HOW IT WORKS:</strong></p> </div> <!-- WHY --> <div class="tab" id="why"> <p><strong>WHY:</strong></p> </div> </div>

CSS:

#tab_container { color: #FFFFFF; background-color: transparent; height: 35px; width: 864px; margin: 14px 0 0 0; display: block; float: left; overflow: hidden; } ul#tab_list { width: 683px; height: 29px; padding: 0; margin: 0; display: inline; overflow: hidden; list-style-type: none; } ul#tab_list li { margin: 0; padding: 0; display: inline; } .how, a.how:link, a.how:visited, a.how_on { float: left; display: inline; width: 135px; height: 29px; margin: 0; text-decoration: none; text-indent: -99999px; overflow: hidden; } a.how:visited, a.how:link, a.how:hover { background-image: url("../images/how_tab.jpg"); background-position: 0 -58px; } a.how_on { background-image: url("../images/how_tab.jpg"); background-position: 0 -29px; } .tabs { color: #000; background-color: #f3f9fb; width: 836px; margin: 0; padding: 0px 14px 6px 14px; display: inline; overflow: hidden; float: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; }

jQUERY:

jQuery(document).ready(function(){ //if this is not the first tab, hide it jQuery(".tab:not(:first)").hide(); //to fix u know who jQuery(".tab:first").show(); //when we click one of the tabs jQuery("#tab_list a").click(function(){ //get the ID of the element we need to show stringref = jQuery(this).attr("href").split('#')[1]; //hide the tabs that doesn't match the ID jQuery('.tab:not(#'+stringref+')').hide(); //fix if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { jQuery('.tab#' + stringref).show(); } else //display our tab fading it in jQuery('.tab#' + stringref).fadeIn(); //stay with me return false; }); });

Just wanted to say thank you in advance for all the help.

Improve this question
4
  • Any reason why you aren't using the jQueryUI tab? jqueryui.com/demos/tabs Commented Mar 11, 2010 at 3:35
  • I didn't know about this, it looks pretty cool, is it easy to implement? Have you used this before? Commented Mar 11, 2010 at 4:04
  • yes you can call it the defacto tab implementation for developers/designers using jQuery. Commented Mar 11, 2010 at 4:34
  • i tried this but you can't get away from the theme it already has for you, which is making it completely useless to me unfortunately. I'll keep trying to get the above to work or just write my own jquery.. it doesn't make sense though, it should show the first tab, hide the rest, then show on click when the ID# matches.. I don't get why it's not working at all. Commented Mar 11, 2010 at 15:39

1 Answer 1

Reset to default
2

I can see the codes are not fully implemented so I'll just point out one obvious what I assume is a typo.

jQuery(".tab_list a") //now jQuery("#tab_list a") //should be
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Wow, I feel like a moron, however that didn't fix the big issue. yet.
@iamtheratio, yes it doesn't fix the big issue. I was thinking you wanted to 'challenge' yourself to create a tab feature. Now that you realised there's jQueryUI Tab, I seriously suggest you give that a try. You'll be blown away :)
well I have images and everything already created and ready to go, I just need the tab feature to work correctly. That's what I'm working with now. However, it's not working yet.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.