如何使这个网格工作

Question

我购买了一个 html5 主题，正在为我的教会网站定制。它有两个很酷的功能：

允许在一页上显示多个项目的选项卡脚本。
一个网格，可以让我以整齐有序的方式显示一系列讲道。

这两个单独使用时效果很好，但是当我尝试使用选项卡内的网格时，没有骰子。我是一名设计人员，对 Javascript 功能知之甚少，需要帮助。以下是尚未回复我的开发人员说要做的事情：

"The grid function is built to run on page load and when you put it inside a tab it doesn’t initialize on page load so don’t work when you change tabs. A custom function needs to be built for this which will run the isotope grid on tabs change. Like:"

$(".nav-tabs li")click(function(e){
ADORE.IsoTope();
e.preventDefault();
}

我不知道在哪里添加这个，甚至不知道是否需要添加其他内容。我还附上了一个 link，您可以在其中下载我的代码（html/php 和 .js 文件），这样您就可以看到发生了什么。任何帮助，将不胜感激。请记住，我对 Javascript.

知之甚少

https://www.dropbox.com/s/jypfjz3a89soxh7/example.zip?dl=0

Answer 1

您可以尝试以下操作：在您的 init.js 中添加以下内容：

$(".nav-tabs li").click(function(e){
   e.preventDefault();
   ADORE.IsoTope(); 
});

例如在 var ADORE = window.ADORE || {};
之后的第一行正如您提到的，您对 javascript 了解不多：第一行以

开头

jQuery(function($){ ...

这需要注意 { 中的所有内容都将在加载 jQuery 时执行。
我不确定是否需要 e.preventDefault(); - 例如以防止链接被执行并将不同的功能附加到 click() 事件，因此当单击选项卡时 Isotope 可能正在工作，但该选项卡不再工作。

如果这不起作用，您可以使用网络开发工具检查是否存在任何脚本错误。如果您不熟悉 Web 开发工具，请在此处查找 Firefox 的一些详细信息：https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console

Answer 2

添加：

$(".nav-tabs li a").click(function(e){
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
        var IsoTopeCont = $(".isotope-grid");
            IsoTopeCont.isotope({
                itemSelector: ".grid-item",
                layoutMode: 'sloppyMasonry'
        });
    });

在您的 init.js 的第 469 行，它应该适合您。谢谢

如何使这个网格工作

How to make this grid work

html

javascript

grid

jquery

tabs