冲突的 jQuery 选项卡

Question

我正在我的 magento 商店中使用以下脚本来制作选项卡幻灯片。看起来它导致了 jQuery 冲突。我尝试使用 jQuery.noConflict()但这没有帮助。

<script type="text/javascript">
            var current = 0;
            $('tabs').firstDescendant().className += ' active-tab';
            var active_tab = $('tabs').firstDescendant().firstDescendant().firstDescendant();
            var motion = false;
            function move_to(to, el){    
               if (!motion) {
                el.parentNode.parentNode.className += ' active-tab';
                if (active_tab) {
                active_tab.parentNode.parentNode.className = 'corner-left-top';
                }
                active_tab = el;    
                move = (current - to)*690;
                new Effect.Move($('tabber'), { x: move, beforeStart:function(){ motion = true;},afterFinish:function(){motion = false;}});
                current = to;
               }
            }        
        </script>

以下是该脚本的 PHP 代码:

<div id="tabs" class="tabs">
    <?php $tabs = 0; ?>
    <?php if ($_description = $this->getChildHtml('description')):  ?>
    <div id="width-tab" class="corner-left-top">
        <div class="corner-right-top" >
            <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                <h3 style="color:#000;"><?php echo strtoupper($this->__('Overview')); ?></h3>
            </div>
        </div>
    </div> 
    <?php endif;?>
    <div id="width-tab-2" class="corner-left-top">
        <div class="corner-right-top">
            <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                <h3 ><?php echo strtoupper($this->__('Specification')); ?></h3>
            </div>
        </div>
    </div>
    <?php  if ($_product->isSaleable() && $this->hasOptions()):?>
        <div id="width-tab-3" class="corner-left-top">
            <div class="corner-right-top">
                <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                    <h3><?php echo strtoupper($this->__('Buy')); ?></h3>
                </div>
            </div>
        </div>
        <?php endif; ?><br class="clear-block" />

<ul id="tabber">
    <li id="container_1" class="tabs-list">Product Description</li>
    <li id="container_2" class="tabs-list">Product Specifications</li>                                      
    <li id="container_3" class="tabs-list">Add to Cart button</li>
</ul> 

问题:ID container_3 包含“添加到购物车”按钮 <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>这是行不通的。

请提供任何帮助，我们将不胜感激。

谢谢

Answer 1

firstDescendant() 不是 jQuery 方法。这似乎来自于好的原型(prototype)。我认为你有一些教程或混淆的东西。

此外，您需要在 DOM ready 上运行脚本除非它嵌入在标记之后，但在生产中您无论如何都会分离这些文件。