Question

I have 2 issues with my tabbed content.

1.How would I highlight the current tab using my code:

http://jsfiddle.net/FznTg/2/

2.I’ve added return false, but it still goes to the top of the page when you click a menu item (To see this, resize the viewing window and click a tab.

again: http://jsfiddle.net/FznTg/2/

Really do hope someone can assist.

Answer 1

You can fix the scrolling issue by putting the .show() or new content before the .hide() of old content. This keeps the document from ever being so small that scrolling is not needed, thus resetting the scroll position.

So, put it in this order:

     //fix
     if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
         jQuery('.tabcontent#' + stringref).show();
     } else {
         //display our tab fading it in
         jQuery('.tabcontent#' + stringref).fadeIn();
     }    

     //hide the tabs that doesn't match the ID
     jQuery('.tabcontent:not(#'+stringref+')').hide();

Working demo here: http://jsfiddle.net/jfriend00/E8Jgd/

For setting the style of the current tab, you should just add a class to the current tab which you can then style using CSS. Putting this line in your click handler will set the current tab to have a class=”current” and remove that class from any other tabs:

jQuery(this).closest("li").addClass("current").siblings().removeClass("current");

You can then style it with CSS like this:

.hometabs li.current a {color:red;}

And, you can than add the class to the HTML for the first tab by default:

<li class="current"><a href="#tab1">All</a></li>

Demo here: http://jsfiddle.net/jfriend00/E8Jgd/