Magento Jquery Bootstrap 和 Prototype 冲突？导航标签不起作用

Question

我使用 Magento 1.9.2.4 和以下主题

https://github.com/webcomm/magento-boilerplate

它的描述是“HTML5 Twitter Bootstrap 3.1 Magento Boilerplate Template”

它适用于“Bootstrap responsive”的所有其他内容。 我的问题是，本网站上的所有以下内容都不适用于我的 安装：

http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

“没有工作”意味着您可以单击下一个选项卡，但边框和突出显示等仍在第一个选项卡上。

Bootstrap 的“nav-pills”也是如此。

在这个样板中有一个 Bootstrap 下拉菜单的解决方法：

jQuery.noConflict();
;(function ($) {
'use strict';

function Site(settings) {

    this.windowLoaded = false;

}

Site.prototype = {
    constructor: Site,

    start: function () {
        var me = this;

        $(window).load(function () {
            me.windowLoaded = true;
        });

        this.attach();
    },

    attach: function () {
        this.attachBootstrapPrototypeCompatibility();
        this.attachMedia();
    },

    attachBootstrapPrototypeCompatibility: function () {

        /*// Bootstrap and Prototype don't play nice, in the sense that
         // prototype is a really wacky horrible library. It'll
         // hard-code CSS to hide an element when a hide() event
         // is fired. See http://stackoverflow.com/q/19139063
         // To overcome this with dropdowns that are both
         // toggle style and hover style, we'll add a CSS
         // class which has "display: block !important"
         $('*').on('show.bs.dropdown show.bs.collapse active nav-tabs.active', function (e) {
         $(e.target).addClass('bs-prototype-override');
         });

         $('*').on('hidden.bs.collapse nav-tabs', function (e) {
         $(e.target).removeClass('bs-prototype-override');
         });*/

        var isBootstrapEvent = false;
        if (window.jQuery) {
            var all = jQuery('*');
            jQuery.each(['hide.bs.dropdown',
                'hide.bs.collapse',
                'hide.bs.modal',
                'hide.bs.tooltip',
                'hide.bs.popover',
                'hide.bs.tab'], function (index, eventName) {
                all.on(eventName, function (event) {
                    isBootstrapEvent = true;
                });
            });
        }
        var originalHide = Element.hide;
        Element.addMethods({
            hide: function (element) {
                if (isBootstrapEvent) {
                    isBootstrapEvent = false;
                    return element;
                }
                return originalHide(element);
            }
        });

    },

    attachMedia: function () {
        var $links = $('[data-toggle="media"]');
        if (!$links.length) return;

        // When somebody clicks on a link, slide the
        // carousel to the slide which matches the
        // image index and show the modal
        $links.on('click', function (e) {
            e.preventDefault();

            var $link = $(this),
                $modal = $($link.attr('href')),
                $carousel = $modal.find('.carousel'),
                index = parseInt($link.data('index'));

            $carousel.carousel(index);
            $modal.modal('show');

            return false;
        });
    }
};

jQuery(document).ready(function ($) {
    var site = new Site();
    site.start();
});

})(jQuery);

我已经在github上问过了question on github没有回复

所以 Bootstrap 的下拉菜单正在工作。 我的问题是我做错了什么还是我错过了什么？

为什么导航选项卡在这里不起作用？

Answer 1

将“'bower_components/bootstrap/js/tab.js'”tab.js 添加到 gulpfile.js 和 将选项卡类添加到 script.js 解决了我的 Bootstrap Nav Pills and Tabs 问题。

       $('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
            $(e.target).addClass('bs-prototype-override');
        });

        $('*').on('hidden.bs.collapse', function(e) {
            $(e.target).removeClass('bs-prototype-override');
        });

最后代码看起来是这样的：

jQuery.noConflict();
;(function($) {
'use strict';

function Site(settings) {

    this.windowLoaded = false;

}

Site.prototype = {
    constructor: Site,

    start: function() {
        var me = this;

        $(window).load(function() {
            me.windowLoaded = true;
        });

        this.attach();
    },

    attach: function() {
        this.attachBootstrapPrototypeCompatibility();
        this.attachMedia();
    },
    attachBootstrapPrototypeCompatibility: function() {

        // Bootstrap and Prototype don't play nice, in the sense that
        // prototype is a really wacky horrible library. It'll
        // hard-code CSS to hide an element when a hide() event
        // is fired. See http://stackoverflow.com/q/19139063
        // To overcome this with dropdowns that are both
        // toggle style and hover style, we'll add a CSS
        // class which has "display: block !important"
        $('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
            $(e.target).addClass('bs-prototype-override');
        });

        $('*').on('hidden.bs.collapse', function(e) {
            $(e.target).removeClass('bs-prototype-override');
        });
    },

    attachMedia: function() {
        var $links = $('[data-toggle="media"]');
        if ( ! $links.length) return;

        // When somebody clicks on a link, slide the
        // carousel to the slide which matches the
        // image index and show the modal
        $links.on('click', function(e) {
            e.preventDefault();

            var $link = $(this),
                $modal = $($link.attr('href')),
                $carousel = $modal.find('.carousel'),
                index = parseInt($link.data('index'));

            $carousel.carousel(index);
            $modal.modal('show');

            return false;
        });
    }
};

jQuery(document).ready(function($) {
    var site = new Site();
    site.start();
});

})(jQuery);