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)。

jQuery / JavaScript选项卡不适用于IE9

2 个答案: