jQuery/JavaScript Tabs не работает для 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)); есть 2x $, но без него скрипт перестает работать.

Я не специалист по JavaScript вообще, поэтому моя проблема. Самое странное для меня, что этот скрипт работает в режимах IE7 и 8 без каких-либо проблем. Только IE9 ломается.

Любая помощь очень ценится.

Спасибо заранее

Dom

Answer 1

Проверьте код и не сообщайте несколько версий jQuery на странице. Я думаю, что это проблема конфликта jQuery.

Answer 2

Глядя на вашу страницу, вы используете старую версию прототипа (1.6.0.3), который был выпущен в 2008 году, которая предварительно IE9. В этой версии при запуске строки: ul.select('li', 'ol') он возвращает пустой список вместо 4 списка элементов, который вы ожидаете.

Быстрое исправление: попробуйте изменить линию на: ul.select('li'), в которой должны быть указаны все элементы, которые вы хотите здесь.

Лучшее исправление: Обновите до последней версии prototype (1.7).