如何在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這個出色的社區模塊。