Question

我正在使用我购买的模板，并尝试向标签块添加功能。可以在此处查看模板。 http://themeforest.net/item/developr-fully-responsive-admin-skin/full_screen_preview/2085628。我正在使用“Side Tabs”并将图像放入选项卡块中的空内容区域。我的第一个选项卡将是一个“全部”选项卡，显示多个图像，所有这些图像都有相应的选项卡。

我想要做的就是点击“全部”标签中的任何图片，然后打开相应的标签。设置模板，以便在用户单击选项卡时将其设置为活动。我想做同样的事情，但我没有点击标签，我希望能够点击相应的图像。我希望我解释清楚。我想我可以在单击图像时以编程方式触发选项卡上的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

你可以发布一些代码吗？

试试......？！

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

Answer 2

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

^^这对我有用。感谢大家的链接和建议！

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

2 个答案: