如何在Magento 1.7.0.2的product \\ view.phtml中包含jquery选项卡

Question

我正在使用Magento 1.7.0.2版本

我想在我的产品页面的default \\ template \\ catalog \\ product \\ view.phtml中添加3个jQuery div

<script>
    $(function() {

        $( "#3tabs_product" ).tabs();

    });
</script>  

 <div id="3tabs_product">
    <ul>
        <li><a href="#tabs-1">Product Informatie</a></li>
        <li><a href="#tabs-2">Leveringsvoorwaarden</a></li>
        <li><a href="#tabs-3">Beoordelingen</a></li>
    </ul>
    <div id="tabs-1">Product Informatie.</div>
    <div id="tabs-2">Leveringsvoorwaarden</div>
    <div id="tabs-3">Beoordelingen</div>
</div>

问题是要运行这三个选项卡，我必须包括两行jquery ui和jquery，仅在它们上方有代码

 <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

但这“破坏”了我使用jquery1.7.1的TopMenulinks！ 和我的添加到购物车功能是javascript。

如果我包括2条jquery行，则选项卡都可以， 但是下拉菜单和“添加到购物车中断” ....如果删除这些行，则菜单将恢复，并且添加到购物车可以再次使用 。 但是，如果不包括这两行，则3Tab将无法正常工作！！！

我该怎么办 ？？？

Answer 1

<script type="text/javascript">
  $.noConflict(); //Use no conflict here instead of js file
  // Code that uses other library's $ can follow here.
</script>

您可以更改库文件启动的顺序。 在page.xml中，更改顺序如下

1. jquery.js
2. noconflict.js
3. prototype.js这将避免IE8中的错误。

将此添加到您的html页面可以解决您的问题。

让我知道我是否可以帮助您更多。

Answer 2

您可以将这行代码$j = jQuery.noConflict()到查询库文件中，并像下面这样更新代码：

<script type="text/javascript">
    $j(function() {
        $j( "#3tabs_product" ).tabs();
    }); 
</script>

或者，您也可以使用http://www.magentocommerce.com/magento-connect/magento-easytabs.html这个出色的社区模块。