以编程方式触发点击事件以激活选项卡

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');
});