what's wrong with my jquery tab code?

Question

the following code that i referenced form the internet, but it doesn't work. why?

jquery code:

 $(document).ready(function(){

        $(".tab:not(:first)").hide();
        $(".tab:first").show();

        $(".htabs a").click(function(){

         var stringref = $(this).attr("href").split("#")[1];

          $(".tab:not(#"+ stringref +')').hide();

          //fix 
          if(jQuery.browser.msie && jQuery.browser.version.substr(0,3)=="6.0"){

            $('.tab #'+stringref).show();
          }else{
            $("tab #"+stringref).fadeIn();
                return false;
          }
        });

html code:

<ul class="htabs hide">
        <li><h2><a href="#design">Graphic design</a></h2></li>
        <li><h2><a href="#development">Development</a></h2></li>
        <li><h2><a href="#freebies">Freebies</a></h2></li>
    </ul>
    <div class="tabs">
        <div id="design" class="tab">
            <ul>
                <li><a href="#">TYpography</a></li>
                <li><a href="#">TYpoface</a></li>
                <li><a href="#">painting</a></li>
                <li><a href="#">Optical balance</a></li>
            </ul>           
        </div>


        <div id="development" class="tab">
            <ul>
                <li><a href="#">TYpography</a></li>
                <li><a href="#">TYpoface</a></li>
                <li><a href="#">painting</a></li>
                <li><a href="#">Optical balance</a></li>
            </ul>           
        </div>


        <div id="freebies" class="tab">
            <ul>
                <li><a href="#">TYpography</a></li>
                <li><a href="#">TYpoface</a></li>
                <li><a href="#">painting</a></li>
                <li><a href="#">Optical balance</a></li>
            </ul>           
        </div>



    </div>


$(this).attr("href").split("#")[1];  what't the meaning of this line? why it's one( [1])?

Answer 1

Without knowing exactly what isn't working...you do have a dot missing on one line:

$(document).ready(function(){

$(".tab:not(:first)").hide();
$(".tab:first").show();

$(".htabs a").click(function(){

 var stringref = $(this).attr("href").split("#")[1];

  $(".tab:not(#"+ stringref +')').hide();

  //fix 
  if(jQuery.browser.msie && jQuery.browser.version.substr(0,3)=="6.0"){

    $('.tab #'+stringref).show();
  }else{
    //$("tab #"+stringref).fadeIn(); // Missing a . on this line
    $(".tab #"+stringref).fadeIn(); // Added the .
        return false;
  }
});

Answer 2

The error is on these two lines:

$('.tab #'+stringref).show();

and

$(".tab #"+stringref).fadeIn();

The .tab should be removed from both, so you have:

$('#'+stringref).show();

and

$("#"+stringref).fadeIn();

Answer 3

$(this).attr("href").split("#")[1]; what't the meaning of this line? why it's one( [1])?

This is within a function bound to the click event of an anchor element, so this refers to the that element. So the code takes the value of the href attribute of the anchor element, splits is by the '#' sign, and then takes the part after the # sign. The code wasn't working because of bad selectors in if-else part

$(".tab:not(:first)").hide();
    $(".tab:first").show();

    $(".htabs a").click(function(){

     var stringref = $(this).attr("href").split("#")[1];

      $("div.tab:not(#"+ stringref +')').hide();

      //fix 
      if(jQuery.browser.msie && jQuery.browser.version.substr(0,3)=="6.0"){

        $('#'+stringref).show(); //fixed selector
      }else{
        $("#"+stringref).fadeIn(); //fixed selector
      }
      return false;
    });