Question

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

一个标签脚本，允许在一个页面上显示多个项目。
一个网格，可以让我以整洁有序的方式展示系列中的布道。

这两个单独使用时效果很好，但是当我尝试使用标签内的网格时，没有骰子。我是一个设计人员，对Javascript函数知之甚少，需要帮助。以下是没有和我一起回来的开发人员所说的：

“网格功能是为了在页面加载时运行而当你把它放在一个标签中时它不会在页面加载时初始化，所以在你更改标签时不起作用。需要为此构建一个自定义函数将在标签更改上运行同位素网格。如：“

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

我不知道在哪里添加它，或者即使需要添加其他内容。我还附上了一个链接，你可以下载我的代码（html / php和.js文件），这样你就可以看到发生了什么。任何帮助，将不胜感激。请记住，我对Javascript知之甚少。

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

Answer 1

添加：

$(".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行，它应该适合你。感谢

Answer 2

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

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

e.g。在var ADORE = window.ADORE || {};之后的第一行中正如您所提到的，您对javascript知之甚少：第一行以

开头

jQuery(function($){ ...

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

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

如何使这个网格工作

2 个答案: