Q:

Jquery tab navigation

I have created a row of tabbed links which when clicked move up to show that the tab has been selected. When another tab is clicked the current "up" tab returns to the "down" state and the new selected tab is changed to be "up".
It's a simple process, which works until the last tab is clicked, if you click off it doesn't return to the "down" position.
I have created a JS fiddle here:
http://jsfiddle.net/MyPNz/1/
My Jquery is as follows:
$(function(){

$('a.tab-link-lower').click(function(){

     var index_highest = 0;

     // do this for each of the tabbed/folder links
     $("a.tab-link-lower").each(function(x){

          // remove any styling from all tabs when any tabbed folder is clicked               
          $('#tab'+x+'-lower a').css("color","#6c6a6a"); 
          $('#tab'+x+'-lower').css("font-weight","normal").css("border-bottom","0px").css("background-image","url(http://s23.postimg.org/aunz2qnmf/folder_tab2.png)").css("margin-top","2px");  

          $('#tab'+$(this).attr("id")).css("display","none");

     });

     // add button/link decoration for clicked tab folder when clicked
     $('#'+$(this).attr("id")+'-lower').css("font-weight","bold").css("background-image","url(http://s23.postimg.org/aunz2qnmf/folder_tab2_up.png)").css("color","#ff0000").css("font-size","11px").css("margin-top","-3px").css("border-bottom","1px solid #090");

     // change the color of the a:link once it has been clicked
     $('#tab'+$(this).attr("id")+' a').css("color","#000");

});

Thanks,
Alan.

A:

Problem is that your element IDs are starting from 1 id="tab1-lower" and after that inside each() function you are using x parameter which is index starting from 0.
Just added extra variable called index which will be incremented x inside each() function
See fiddle here http://jsfiddle.net/MyPNz/2/
     // do this for each of the tabbed/folder links
     $("a.tab-link-lower").each(function(x){
          var index = x + 1;
          // remove any styling from all tabs when any tabbed folder is clicked               
          $('#tab'+index+'-lower a').css("color","#6c6a6a"); 
          $('#tab'+index+'-lower').css("font-weight","normal").css("border-bottom","0px").css("background-image","url(http://s23.postimg.org/aunz2qnmf/folder_tab2.png)").css("margin-top","2px");  

          $('#tab'+$(this).attr("id")).css("display","none");

     });

