從前一頁的鏈接觸發Javascript

我有一個服務頁面上的鏈接列表，當點擊時，顯示與個別服務相關的內容。這是爲了節省頁面上的空間。我已經在JS中使用幻燈片做了這個。從前一頁的鏈接觸發Javascript

在主頁上我還有一個服務列表，我希望鏈接服務頁面，然後根據點擊主頁上的服務打開相關內容。

我是Javascript的新用戶，所以不幸的是，這不是我可以自己解決的問題，也不是爲別處找到解決方案。我真的很感激有人幫助我找到一種做法。

查找我的代碼很短的例子如下：

首頁

<ul id='homepage-services-list'> 
    <li><a href='services.php'>Service 1</a></li> 
    <li><a href='services.php'>Service 2</a></li> 
</ul>

服務

<ul class='services-tabs'> 

    <li class='services-tab'> 
     <a class='service-1-trigger'> 
     <div> 
      <h3>Service 1</h3> 
      <img src='images/down-arrow-icon.png'> 
     </div> 
     </a> 
    </li> 

     <article class='service-1-content'> 
     <p>Content about service etc.</p> 
     </article> 

    <li class='services-tab'> 
     <a class='service-2-trigger'> 
     <div> 
      <h3>Service 2</h3> 
      <img src='images/down-arrow-icon.png'> 
     </div> 
     </a> 
    </li> 

     <article class='service-2-content'> 
     <p>Content about service etc.</p> 
     </article> 

</ul>

使用Javascript - JQuery的

$(document).ready(function(){ 

    $(".service-1-trigger").click(function(){ 

     $(".service-1-content").slideToggle(600, function(){ 
      $(this).toggleClass("service-1-toggle").css('display',' '); 
     }); 
    }); 

    $(".service-2-trigger").click(function(){ 

     $(".service-2-content").slideToggle(600, function(){ 
      $(this).toggleClass("service-2-toggle").css('display',' '); 
     }); 
    }); 

});

謝謝！

來源

2016-07-18 JacksonDavis

您可以將錨定添加到您的鏈接。

<ul id='homepage-services-list'> 
    <li><a href='services.php#1'>Service 1</a></li> 
    <li><a href='services.php#2'>Service 2</a></li> 
</ul>

使用這些錨點，您可以從URL中提取服務想要的（1或2）並用jQuery模擬點擊。

在你document.ready：

var url = document.location.toString(); 
if (url.indexOf('#') != -1) { 
    var num_service = url.split('#')[1]; 
    $(".service-" + num_service + "-trigger").click(); 
}

來源

2016-07-18 15:01:45 Knriano

謝謝你的回答我的朋友。它工作得很漂亮！ – JacksonDavis

呃。點擊和啓動代碼調用都有一個共同的功能，而不是觸發綜合事件。 –

另請注意，'url.match（'＃'）'將'＃''轉換爲正則表達式（'/＃/'），然後將字符串與它匹配，創建一個匹配數組（如果匹配）。如果您只想查看一個字符串是否爲'＃''，只需使用'url =='＃''（尤其是因爲某些字符在正則表達式中是特殊的）。 –

這裏有一個辦法來解決：

在主頁上，添加片段標識符到這些鏈接：

<ul id='homepage-services-list'> 
    <li><a href='services.php#service-1'>Service 1</a></li> 
    <li><a href='services.php#service-2'>Service 2</a></li> 
</ul>

在頁面加載（裏面你ready處理程序將執行）看在location.hash。這是該頁面的當前片段標識符。如果它是您的服務標識符之一，請觸發顯示該服務的代碼。
你也可能有你的click處理程序通過設置location.hash，一致性哈希添加到URL。

也看在history API超過哈希值和URL中，頁面過渡更多的控制。

來源

2016-07-18 14:51:50

感謝您抽出時間來貢獻給我一個解決方案，非常感謝！ – JacksonDavis

由於切換到SPA型框架的問題，一個頁面上的javascript無法直接影響後續鏈接的頁面。

兩個簡單的方法來解決這個是

曲奇/ localStorage的：讓你的輸出鏈路設置cookie爲每個鏈接的特定值。接收頁面可以檢查這個cookie的值並根據需要進行調整。
URL散列：在散發鏈接中包含散列值或參數，即<a href='services.php#service1'>。接收頁面然後可以檢查location.hash來讀取此值。

來源

2016-07-18 14:58:11

謝謝您花時間爲我提供解決方案Daniel，非常感謝！ – JacksonDavis

從前一頁的鏈接觸發Javascript

回答

相關問題