當頁面加載時，Jquery顯示匹配的內容

Question

我有一個特定的頁面，我顯示了兩個不同的項目，並且當您點擊頁面切換的內容中的某個項目時，該特定項目信息隱藏了其他項目信息。所以它幾乎是一個簡單的選項卡系統，但我的問題是，我想顯示默認情況下的第一個項目的信息，現在我所有的內容是hiddn，直到我點擊兩項中的一個。

以下是我爲我的Jquery：

$(".packBat:first").addClass("active"); 
$(".showWraps").hide(); 
$(".packBat .photoWrap").click(function() { 
    var batpackData = $(this).closest('.packBat').metadata({ 
     type: 'attr', 
     name: 'data' 
    }); 
    $(".packBat").removeClass("active"); 
    $(this).closest('.packBat').addClass("active"); 
    $('.showWraps').hide(); 
    $('.showWraps').each(function() { 
     var wrapData = $(this).metadata({ 
      type: 'attr', 
      name: 'data' 
     }); 
     if (wrapData.productId == batpackData.productId) { 
      $(this).fadeIn("fast"); 
     } 
    }); 
}); 

Answer 1

後您綁定click偵聽器選擇的標籤，只是.click()一個你想要的。

$(".packBat .photoWrap").click(function() { 
    // snip 
}).first().click(); 

---

另外一個簡單的問題說，我想停止fadin如果人們已經在項目的內容，因爲現在如果你點擊它的內容已經顯示出你得到一個項目快閃但conent dosent變化，因爲它已經是正確的內容

這裏的解決方案，與其他一些清理沿：

var metaArgs = {type: 'attr', name: 'data'}, 
    ACTIVE = 'active'; 

$(".packBat .photoWrap").click(function() { 
    var $this = $(this), 
     $closest = $this.closest('.packBat'); 

    // no need to continue if the right one is already showing 
    if ($closest.hasClass(ACTIVE)) return; 

    var batpackData = $closest.metadata(metaArgs); 

    $closest.addClass(ACTIVE).siblings().removeClass(ACTIVE); 

    $('.showWraps').hide().each(function() { 
     var wrapData = $(this).metadata(metaArgs); 
     if (wrapData.productId == batpackData.productId) $(this).fadeIn("fast"); 
     return false; // cancel further iteration 
    }); 
}).first().click();