Magento Jquery Bootstrap和Prototype冲突？ nav-tabs不起作用

Question

我使用Magento 1.9.2.4和以下主题

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

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

它与“Bootstrap响应”的其他所有内容都能正常工作。 我的问题是，本网站上的所有内容都不适用于我的网站 安装：

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

并且“无法正常工作”意味着您可以点击下一个标签，但边框和突出显示等仍然在第一个标签页上。

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

在此Boilerplate中，有一个关于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的Dropdown正在运行。 我的问题是我做错了什么或者我错过了什么？

为什么导航标签在这里不起作用？

Answer 1

添加＆＃34;＆＃39; bower_components / bootstrap / js / tab.js＆＃39;，＆＃34; tab.js到gulpfile.js和 将tab类添加到script.js解决了我的Bootstrap Nav Pills和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);