我的 jquery 選項卡代碼有什么問題？

Question

我從互聯網引用的以下代碼，但它不起作用。 為什么？

jquery代碼：

 $(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 代碼：

<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

在不確切知道什么不起作用的情況下...您確實在一行上缺少一個點：

$(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

錯誤在這兩行：

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

和

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

.tab應該從兩者中刪除，所以你有：

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

和

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

Answer 3

$(this).attr("href").split("#")[1]; 這條線是什么意思？ 為什么是一個（[1]）？

這是在綁定到錨元素的單擊事件的 function 內，所以 this 指的是那個元素。 所以代碼取anchor元素的href屬性的值，用'#'號分割，然后取#號后面的部分。 由於 if-else 部分中的錯誤選擇器，代碼無法正常工作

$(".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;
    });