jQuery Tabbed Navigation

@James-
I was considering removing the outline, but I thought the terrible usability did not outweigh the gain from removing it.

Thanks… your tutorial was very easy to follow, and very helpful.

~Aaron I

Thanks for taking the time to post this article. I needed to create a simple tab based navigation menu using CSS and JQuery and after browsing about 10 articles I found this one really easy to follow.

Thanks again for sharing the code.

Vardan

How could I get it to work without the sliding up and down, and just have it click to the next. 

Kind of like this example: http://www.mirceasoaica.com/demo/tabs.html

I can get yours to work on my site here for FF3, IE7 and IE6.  But I can’t get the example I posted to work on IE7 or IE6.

Check out your jQuery tabs implemented here, and you’ll see why I won’t be able to use the sliding up and down:  http://barefoot-webdesign.com/tsw/cd-stud-welders.html

Thanks!  It now works.

For those wanting only to show and hide with no effects, here’s the solution.  Thanks Trevor for helping me with this quick fix.

@Michael SteelWolf-
Do you have a link to your example?

@Michael SteelWolf-
I’m not seeing where the tabs are implemented. I see where it says: “No comments yet”, “0 Trackbacks/Pings” & “0 Tweets”, but nothing happens when I click them.

Alright, at this point things are the way they were - working in FF and IE (remarkably), but jumping text in Safari/Chrome.

Wow, you’re brilliant. Works like a charm. Thank you so much!

@STS-
Not sure, fadeIn and fadeOut should work just fine. Do you have a link to it not working?

Right, this tab menu is using parents and children to traverse. You would need to change the JS in order to account for a change in the markup.

One more question (so sorry!). When I add the lightbox plugin for JQuery,  the tabbed navigation no longer works. Is there some kind of clash? Thanks in advance!

Great tutorial, Trevor ! .

i think this is a great tut for me (beginner style) and works great…

howerver, my tabs are about one tab, pushed to the right…

the tab does not line up left with the content…

CSS is exact….  what am i doing wrong?

its on my development server, so no…

Tab 1 seems to be pushed to the right about 50px or so….

both in IE and FF

here is a screen shot from FF on a MAC.

im not worried about the gap between the tabs and container, but more the fact the tab is being pushed right…

http://www.acnoriega.com/bci/tabbed-menu.gif

nope.

CSS is in tact.  i only changed the width to fit the center column to 500px.

and i verified i have no conflicting styles in my CSS sheet… weird… but ill keep digging.

How can i put the tabs under the content?  i tried to just throw the UL under the content area, and it seems to have killed it… do i need to modify the .js?

I will take a look and give it a shot. thanks

Thank you so much for this tutorial!
I really like the freedom of choosing our own animations.

Funny thing is happening though when I run my cursor fast over the tabs. Then all the containers show one below the other!

Any idea how to prevent this from happening?

@Trevor-
I should have mentioned that I run the script on hover and not on click.

So this is what I have

What you suggested did not work :(
Any other help?

@Sarah-
If you remove the part that is adding selected to the divs, I think that should solve the problem.

Sara - can you provide a link to your example?

I haven’t played with your code yet, but I would try these things:

Use show/hide instead of the slides and fades.  The issue seems to occur when you hover over a new tab before the last one has completed. 

Another thing to try is to put some clode in that will hide all the content tabs.  No fade, just immediately set visibility to false.

thank you thank you! I’ve been scouring the interwebs for weeks looking for just this simple solution. My specific need was to have a tabbed style page but have each tab be distinctly linkable.

@Joelle-
Do you have a link to your page? Are you having problems getting it to work with or without JavaScript enabled?

@Joelle-
Hmm, seems to be working fine for me with JavaScript enabled.

@Joelle-
Yes, you will want to check the variable in the URL and add in conditional statements to determine which tab should show.

@Joelle-
Take a look at this article that I wrote for NETTUTS. It’s the same general principle.

Got another question, how can I include content from links within a tab?

For example, tab 2 has a list of links to the left, and when the user clicks a link, it will display the content.
This also includes say having a search input box on the page and the user can search a sql db and display the records beside the menu in say tab 2.

I’m hoping this is possible, because if so, this is the ultimate script for what I need.

Any/all responses would be greatly appreciated.
Cheers :)

Excellent script Trevor! And thanks for trying to teach a little while sharing it at the same time.

I’ve tried to implement it myself and have it all working but due to having three tabbed navs on one page I’m having trouble with one thing. The example is here: http://dev.creativelogic.org/aboutus/the-team

What is happening is on the bottom tab in particular when you click a link the page jumps back to the top of the first tabbed nav. I thought it was a simple thing such as the anchor links causing it but no matter what I did to the links in the tabs in that section it always went back to the top. Is it something in the javascript I need to alter then? Thanks in advance!

Ah, that makes sense. I will have to try that out. Thanks, I really appreciate the help!

@arpix-
Wrap your code in <pre><code> tags. Then, make sure to replace all < with &lt;

Is there any way to make the top level tab click simply go to the link provided instead of running the .click function?

So when I click tab 1 I want it to go to the URL listed. When I click tab 2 I want it to change the page content as normal.

Anyway to do this?

Ya I tried to do that. It’s included in the “ul.tabNav a” area. I tried writing an empty function for it, but that didn’t work. How would you filter it out? Only way I can think of is to make the other ones a certain class and put that into the javascript function already there.

Got it to work. For anyone else of the same desire:

$(‘ul.tabNav :not(#nav_home) a’).click(function()

Space before :not and after the ending parentheses.

@goodbyeplanet-
Just change the class selectors to id selectors.

@goodbyeplanet-
Those are not methods in jQuery. You could use attribute methods though.

thank you Trevor for your help. I ended up combining ids and classes and that did the trick. But I have two observations :

1). the class tabnav on  seems to work even if i dont declare it in my css. how is this possible.

2). what does this script do:<code></code>

i noticed that the toggling will not work without that.

@goodbyeplanet-
You have to make sure you encode your < symbols with &lt; when pasting code. jQuery is the JavaScript library being used.

Great tutorial.
I have a question though: Is there an easy way to link to the page with the second or third tabs active instead of the default? If,  say,  on another page I wanted to provide navigation to this page with Tab1 active, Tab2 active and Tab3 active?
Thanks in advance!

You’re a genius! Thanks for the speedy reply.

@Michael-
You will have to modify the script to incorporate this.

@Ed-
I’m not exactly sure what you are asking for.

@Bob-
I don’t have any plans on making that kind of modification, but you could easily add in that functionality.

Hey Trevor!

Thanks for this nifty tutorial. I have created a few tabbed pages with jQuery, and this is the most elegantly designed one. However, I am still tripping up on the one thing I want these things to do: navigate to an open tab from another page. Yours certainly does that well, and after following your directions, mine does too (well, better than any attempt I’ve made so far.) The trouble I have now is that ALL the content shows up in the content-pane when clicked from another page, even though the correct tab is current. Can you tell exactly what I am doing wrong from the code provided in the link above?

@Tony MacFarlane-
Whoops! forgot to put in the display:none declaration in the “.tab” div ... heh!

Great job!

@Shane-
You could use visibility: hidden instead of display: none.

@Trevor-
But now it’s not showing the content??

@Shane-
Well visibility: hidden hides the content. It sounds like you have a lot of customization to do to make it suit your needs.

@Shane-
Right, you can use visibility: hidden instead of display: none.

@Shane-
Well you have to toggle it with each click.

Here’s my modified code for use in Drupal. I do have some custom stuff in there, like using views and there’s still a bug in IE7, but IE8 works fine.

Drupal.behaviors.togg = function (context) {
  $(’#navigation-region .view-content’).addClass(‘tabContainer’);
  $(’#header-area ul.links a’).click(function(){
var curChildIndex = $(this).parent().prevAll().length + 1;
if(curChildIndex == 4 || curChildIndex == 7){
  location.href=$(this).attr(“href”);
}else{
  if($(this).parent().hasClass(‘current’)){
  $(this).parent().removeClass(‘current’);
  $(’.tabContainer’).children(’.current’).slideUp(‘slow’,function() {
    $(this).removeClass(‘current’);
   
  });
  }else{ 
  $(this).parent().parent().children(’.current’).removeClass(‘current’);
  $(this).parent().addClass(‘current’);
  if($(’.tabContainer’).children().hasClass(‘current’)){
  $(’.tabContainer’).children(’.current’).slideUp(‘slow’,function() {
    $(this).removeClass(‘current’);
    $(’.tabContainer’).children(‘div:nth-child(’+curChildIndex+’)’).slideDown(‘normal’,function() {
    $(this).addClass(‘current’);
    });
  });
  }else{
  $(’.tabContainer’).children(‘div:nth-child(’+curChildIndex+’)’).slideDown(‘normal’,function() {
    $(this).addClass(‘current’);
    });
  }
  }
  //alert(curChildIndex);
  return false;
}

  });

Will be released live on July 1, 2010, hopefully, at http://www.ciu.edu
};

@Tony MacFarlane-
Everything looks fine to me. Are you still having the problem?

@Tony MacFarlane-
Do you have the PHP conditional statements around your content area tabs?

@Tony MacFarlane-

It didn’t format the code!

Take two:


   
      <li>News Releases
      <li>News Archive
      <li>Newsletter Archive
      <li>Blog
      <li>Brochure
   
   
     
      ...
     
     
        ...
     
     
        ...
     
     
        ...
     
     
        ...
     


Grr!

Take four:

@Trevor-
Yes—

Here is the (stripped out) code:

   
      <li>News Releases
      <li>News Archive
      <li>Newsletter Archive
      <li>Blog
      <li>Brochure
   
   
     
      ...
     
     
        ...
     
     
        ...
     
     
        ...
     
     
        ...
     


I’m having same issue with the ?tab=2 to the URL. I can see from your demo that tab=2 works, hence shows the tab 2 content, but also noticed that you don’t have url file name. So in my version the codes are within a file call index.htm, so idealy, index.htm?tab=2 should display the tab 2 content but it does not. Any idea why?