jQuery 不适用于 magento 产品视图页面中的自定义选项卡

Question

我正在尝试在我的主题中向产品视图页面添加一些自定义标签。我可以看到内容，但 jQuery 没有生效。以下是详细信息，如果需要做任何额外的事情，请有人检查并提出建议。

编辑：我使用的是 magento 1.9.2.2

app/design/frontend/mytheme/default/template/catalog/product/view.phtml

            <script type="text/javascript">
          
                alert("YEs!");
                $.noConflict();
                $('ul.tabs').each(function(){
                  // For each set of tabs, we want to keep track of
                  // which tab is active and its associated content
                  var $active, $content, $links = $(this).find('a');

                  // If the location.hash matches one of the links, use that as the active tab.
                  // If no match is found, use the first link as the initial active tab.
                  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                  $active.addClass('active');

                  $content = $($active[0].hash);

                  // Hide the remaining content
                  $links.not($active).each(function () {
                       $(this.hash).hide();
                  });

                  // Bind the click event handler
                  $(this).on('click', 'a', function(e){
                  // Make the old tab inactive.
                     $active.removeClass('active');
                     $content.hide();

                  // Update the variables with the new link and content
                     $active = $(this);
                     $content = $(this.hash);

                  // Make the tab active.
                     $active.addClass('active');
                     $content.show();

                  // Prevent the anchor's default click action
                     e.preventDefault();
                  });
                  
                });
             
           </script>  

<div class="custom-nav">
                <ul class="tabs">
                    <li><a href="#tab1">Description</a></li>
                    <li><a href="#tab2">Details</a></li>
                    <li><a href="#tab3">Reviews</a></li>
                </ul>           
                <div class="custom-block-details" id="tab1">
                    <?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
                </div>
                <div class="custom-block-details" id="tab2">
                    <h4><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></h4>                 
                </div>
                <div class="custom-block-details" id="tab3">
                    <h4>Reviews</h4>
                    <?php echo $this->getReviewsSummaryHtml($_product, false, true)?>                 
                </div>
            </div>

app/design/frontend/mytheme/default/layout/page.xml

<block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs"><script>lib/ccard.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>scriptaculous/builder.js</script></action>
                <action method="addJs"><script>scriptaculous/effects.js</script></action>
                <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <action method="addJs"><script>scriptaculous/controls.js</script></action>
                <action method="addJs"><script>scriptaculous/slider.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>
                <action method="addJs"><script>varien/form.js</script></action>
                <action method="addJs"><script>varien/menu.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>mage/cookies.js</script></action>
                <action method="addJs"><script>js/jquery-1.7.2.js</script></action>
                <!--<action method="addJs"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></action>-->
                <!--<action method="addJs"><script>jsproductViewNavbar.js</script></action>-->

                <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
            </block>

Answer 1

使用 $
的 jQuery 实例 像 ** jQuery.noConflict() ** 并写

jQuery.noConflict()  

在 jquery-1.7.2.js 文件的底部 view.phtml 实例 并更改您的 js 文件的权限（读/写）