从上一页的链接触发Javascript

Triggering Javascript from a link on a previous page

本文关键字：接触 Javascript 链接 一页      更新时间：2023-09-26

我在服务页面上有一个链接列表，当单击该列表时，会显示与单个服务相关的内容。这是为了节省页面上的空间。我使用JS中的幻灯片完成了这项工作。

在主页上，我还有一个服务列表，我想将其链接到服务页面，然后根据主页上点击的服务打开相关内容。

我是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',' ');
       });
   });
});

谢谢！

您可以为链接添加锚点。

<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();
}

这里有一种方法：

  1. 在主页上，将片段标识符添加到这些链接：

    <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>

  2. 在页面加载时（在ready处理程序内部），查看location.hash。这是页面的当前片段标识符。如果它是您的服务标识符之一，则触发显示该服务的代码。

  3. 为了保持一致性，您还可以让click处理程序通过设置location.hash将散列添加到URL中。

还可以查看历史API，了解对同相转换的哈希和URL的更多控制。

如果不切换到SPA类型的框架，一个页面上的javascript就无法直接影响后续链接的页面。

解决这一问题的两种简单方法是

  • Cookie/localStorage：让您的传出链接为每个链接设置一个具有特定值的Cookie。接收页面可以检查此cookie的值，并根据需要进行调整
  • URL散列：在传出链接中包括散列值或参数，即<a href='services.php#service1'>。接收页面然后可以检查location.hash以读取该值
相关文章：