若页面并没有首先通过导航栏加载，JQuery click()将无法正确加载页面

Question

我正在使用templatemo中的这个模板。

我想在正文中加入一些对网站其他部分的引用(例如，请"联系我"以获取更多信息(。如果单击"；联系我"；页面应该导航到"；联系人"；以与用户单击导航栏导航到页面(使用相同的动画(相同的方式。

为了做到这一点，我添加了以下代码来触发点击事件：

<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>

以及触发点击的功能：

function loadPage(pageNo) { 
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});      
}

所以这段代码是有效的，如果我点击引用，页面就会像点击导航栏一样发生变化。但是：

如果我重新加载页面并单击引用，页面将导航到联系人页面，但该页面没有正确显示(缺少联系人表单和谷歌地图视图(。

如果我重新加载页面，首先通过菜单打开联系人页面，然后切换到带有引用的页面并单击它，联系人页面就会正确加载。

如果我引用另一个页面(例如Gallery(，也会显示这种行为。将显示库元素(页面并非完全为空(，但元素之间的间距不正确。

似乎每个页面都必须通过导航栏至少加载一次。如果发生这种情况，则通过文本中的引用打开时，所有页面都会正确显示。

感谢您的支持。

Answer 1

您的模板使用Hero滑块+一些自定义JavaScript函数在"页面"；，因此，您需要使用相同的函数来获得相同的行为。

这样做会奏效：

<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>

你需要添加这个JS函数：

function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}

函数goToPage()采用一个参数，即节的字符串名称，因此如果您有一个名为My Gallery的节，则需要放置该参数，而不是my-gallery或索引。