我有這方面的作業模板從templatemo。
我想在正文中包含對網站其他部分的一些參考（例如，請“聯系我”以獲取更多資訊）。如果您點擊“聯系我”，頁面應該導航到“聯系”，就像用戶點擊導航欄導航到頁面一樣（使用相同的影片）。
為此，我添加了以下代碼來觸發點擊事件：
<p >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();});
}
所以這段代碼是有效的，如果我點擊參考，頁面就會改變，就像我點擊導航欄一樣。但：
如果我重新加載頁面并單擊參考，該頁面將導航到聯系頁面，但是該頁面沒有正確顯示（聯系表單和谷歌地圖視圖丟失）。
如果我重新加載頁面，首先通過選單打開聯系人頁面，然后切換到帶有參考的頁面并單擊它，聯系人頁面已正確加載。
如果我參考另一個頁面（例如圖庫），也會顯示此行為。顯示圖庫元素（頁面不是完全空白），但元素之間的間距不正確。
似乎每個頁面都必須通過導航欄至少加載一次。如果發生這種情況，所有頁面在通過文本中的參考打開時都會正確顯示。
謝謝你的支持。
uj5u.com熱心網友回復：
您的模板使用 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不是索引。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401319.html
標籤：javascript html 查询 css