以編程方式觸發點擊事件以激活選項卡

Question

我正在使用我購買的模板，並試圖將功能添加到選項卡塊。模板可以在這裏查看。 http://themeforest.net/item/developr-fully-responsive-admin-skin/full_screen_preview/2085628。我正在使用「側面標籤」，並將圖像放入標籤塊中的空白內容區域。我擁有的第一個標籤將是一個顯示多個圖像的「全部」選項卡，所有這些圖像都將具有相應的選項卡。

我想要做的就是讓它點擊「全部」選項卡中的任意圖像，並打開相應的選項卡。該模板已設置，以便當用戶單擊一個選項卡時，將該選項卡設置爲活動狀態。我想要做同樣的事情，但不要點擊選項卡，我希望能夠點擊相應的圖像。我希望我的解釋清楚。我想我可以通過編程方式觸發選項卡上的onClick事件，當我單擊圖像時，或者我可以將該類設置爲在單擊該圖像時在選項卡上處於活動狀態。

<!-- Tabs --> 
    <ul class="tabs"> 
     <li class="active"> 
      <a href="#sidetab-all">All</a> 
     </li> 
     <xsl:for-each select="$currentPage/SKUContainer/SKU"> 
      <li> 
       <a href="#sidetab-{position()}"><xsl:value-of select="./productNumber"/> - <xsl:value-of select="./productName"/></a> 
      </li> 
     </xsl:for-each> 
    </ul> 

    <!-- Inside each tab --> 
    <div class="tabs-content" style="min-height: 194px;"> 
     <!--Display SKU images --> 
     <div class="with-padding" style="min-height: 190px; margin-bottom:10px;" id="sidetab-all"> 

    <xsl:for-each select="$currentPage/SKUContainer/SKU"> 
     <div class="with-padding" style="width:190px; list-style:none; text-align:center; margin:0px; padding:0px; float:left;"> 

     <div style="background:#333333;"> 
         <a href="#sidetab-{position()}"><img style="margin:0px;padding:0px; background:#666;" src="{umbraco.library:GetMedia(./mainImage, 'false')/umbracoFile}"/></a> 

         <div style="text-align:center; list-style:none; width:190px; background:#333; color:white; padding: 0px 0px 1px 0px; font-size: 12px;"><xsl:value-of select="productNumber"/> - <xsl:value-of select="productName"/></div> 
         <div style="text-align:center; list-style:none; width:190px; background:#333; color:white; padding: 0px 0px 5px 0px; font-size: 12px;"> <xsl:value-of select="width"/> x <xsl:value-of select="height"/> x <xsl:value-of select="depth"/></div> 
        </div> 
        </div> 
       </xsl:for-each> 

       </div> 

<xsl:for-each select="$currentPage/SKUContainer/SKU"> 
    <div class="with-padding" style="min-height: 190px;" id="sidetab-{position()}"> 
    <div style="float:left;"> 
     <xsl:if test="./mainImage &gt; 0"> 
     <img src="{umbraco.library:GetMedia(./mainImage, 'false')/umbracoFile}"/> 
     </xsl:if> 
    </div> 

<!--Display SKU name -->  
    <div class="with-padding" style="float:left;"> 
    <h3><xsl:value-of select="./productName"/></h3> 
    </div> 

<!--Display Content --> 
    <div class="with-padding" style="float:left;"> 
    <xsl:value-of select="bodyText" disable-output-escaping="yes"/> 
    </div> 

    <div style="clear:left;"></div> 
</div> 
</xsl:for-each> 

</div> 

Answer 1

<script type="text/javascript"> 
    $(function(){ 
     $('.sidetabimage').click(function(e){ 
     e.preventDefault(); 
     var idName = $(this).attr("id"); 
     var id = idName.replace("sidetabimage-",""); 
     $('#sidetabnav-'+id).click(); 
     }); 
    }); 
    </script> 

^^這爲我工作。感謝大家的鏈接和建議！

Answer 2

你能發表一些代碼嗎？

試試...？！

jQuery(document).ready(function() { 
    var $tab = jQuery('.tab-selector'); 
    $tab.trigger('click'); 
});