jQuery/JavaScript選項卡不適用於IE9

Question

我有這個選項卡，除了IE 9之外的任何瀏覽器都可以正常工作。一直試圖解決這個問題好幾天了，我想我已經完全瘋了。

<div class="product-collateral"> 

     <div class="tab"><h3 class="product_tabs_additional">Additional Information</h3></div> 
     <div class="product-tabs-content" id="product_tabs_additional_contents"> 
      Additional Information Content 
     </div> 

     <div class="tab"><h3 class="product_tabs_agenda">Agenda</h3></div> 
     <div class="product-tabs-content" id="product_tabs_agenda_contents"> 
      Agenda Content 
     </div> 


     <div class="tab"><h3 class="product_tabs_terms">Terms and Conditions</h3></div> 
     <div class="product-tabs-content" id="product_tabs_terms_contents"> 
      Terms and Conditions Content 
     </div> 


     <div class="tab"><h3 class="product_tabs_locations">Locations</h3></div> 
     <div class="product-tabs-content" id="product_tabs_locations_contents"> 
      Locations Content 
    </div></div> 

<script type = "text/javascript" > $jQ = jQuery.noConflict(); 
$jQ('.product-collateral .tab h3').wrapAll('<ul class="product-tabs"></ul>').wrap('<li></li>'); 
$jQ('.product-collateral .product-tabs li').each(function(index) { 
    $jQ(this).attr('id', $jQ(this).find('h3').attr('class')); 
    if (index === 0) { 
     $jQ(this).addClass('active'); 
    } 
}); 
//<![CDATA[ 
Varien.Tabs = Class.create(); 
Varien.Tabs.prototype = { 
    initialize: function(selector) { 
     var self = this; 
     $$(selector + ' h3').each(this.initTab.bind(this)); 
    }, 

    initTab: function(el) { 
     el.href = 'javascript:void(0)'; 
     if ($(el.parentNode).hasClassName('active')) { 
      this.showContent(el); 
     } 
     el.observe('click', this.showContent.bind(this, el)); 
    }, 

    showContent: function(a) { 
     var li = $(a.parentNode), 
      ul = $(li.parentNode); 
     ul.select('li', 'ol').each(function(el) { 
      var contents = $(el.id + '_contents'); 
      if (el == li) { 
       el.addClassName('active'); 
       contents.show(); 
      } else { 
       el.removeClassName('active'); 
       contents.hide(); 
      } 
     }); 
    } 
} 
new Varien.Tabs('.product-tabs'); 
//]]> 
< /script>​ 

我知道，行$$(selector + ' h3').each(this.initTab.bind(this));之一是有2倍$但是沒有它的腳本停止工作。

我不是一個JavaScript專家，因此我的問題。對我來說最奇怪的是，這個腳本在IE7和8模式下運行沒有任何問題。只有IE9破了。

任何幫助非常感謝。

預先感謝您

大教堂

Answer 1

請檢查您的代碼，並避免在頁面上聲明多個版本的jQuery。我認爲它是jQuery衝突的問題。

Answer 2

在你的頁面的時候，您使用的是舊版本的原型（1.6.0.3），這是在2008年這是預IE9釋放。在此版本中，當您運行該行時：ul.select('li', 'ol')它將返回空列表而不是您期望的4元素列表。

快速修復：嘗試將行更改爲：ul.select('li')，它應該選擇您想要的所有元素。

更好修復：升級到最新版本prototype (1.7)。