Запуск Javascript по ссылке на предыдущей странице

Question

У меня есть список ссылок на странице служб, которые при нажатии отображают содержимое, относящееся к отдельной службе. Это позволяет сэкономить место на странице. Я сделал это, используя слайд в 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',' '); 
     }); 
    }); 

}); 

Спасибо!

Answer 1

Вы можете добавить якорь к своим ссылкам.

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

Answer 2

Вот один из способов приблизиться к нему:

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, чтобы добавить хэш в URL, установив location.hash, для обеспечения согласованности.

Посмотрите также на history API для большего контроля над хэшей и URL-адресов для переходов в странице.

Answer 3

За исключением перехода на структуру SPA-типа, для javascript на одной странице нет возможности напрямую влиять на связанную впоследствии страницу.

Два простых подходов к работе вокруг этого является

• Cookie/LocalStorage: Есть ваша исходящая связь установить печенье с конкретным значением для каждой ссылки. Получающая страница может проверить значение этого файла cookie и при необходимости настроить.
• URL-адрес хеша: включить хеш-значение или параметр в исходящих ссылках, то есть <a href='services.php#service1'>. Затем страница приема может проверить location.hash, чтобы прочитать это значение.