Якорные ссылки в скрытых divs

Question

Поскольку я работаю с очень ограниченной и старой CMS, у меня не так много вариантов. Надеюсь, это возможно:

У меня есть страница с 4 div. Первый из них всегда виден, а другие скрыты через класс, выцветший и выцветший. С помощью мыши над функцией посетители могут сделать другие видимыми с зависанием. Текущий активный div исчезает в новом. Все идет нормально. (Это делается с помощью простого javascript, поскольку jQuery на сайте очень старый, и я не могу его обновить).

Теперь мне нужна возможность связать другие div с другими страницами. Я пробовал следующее:

Создание функции переключения в javascript, чтобы скрыть/показать соответствующий div. Я попытался вызвать эту функцию с другой страницы, но это кажется невозможным. Есть ли другой способ для этого? Дайте мне знать, если вам нужно больше деталей.

Я использовал функцию поиска и нашел некоторые темы «якорные ссылки в скрытых элементах», но поскольку они находятся в другой ситуации, решение не относится ко мне грустно!

HTML код с дивой:

<div snippet="switcher"> 
    <ul class="text-options "> 
    <li class="col text-topic selected"><a class="dark" data-role="option-picker">Div 1</a></li> 
    <li class="col text-topic"><a class="dark" data-role="option-picker">Div 2</a></li> 
    <li class="col text-topic"><a class="dark" data-role="option-picker">Div 3</a></li> 
    </ul> 
<div class="panels rel"> 
     <div class="z-med faded-in" style="flex-direction: row; margin-top: 500px;"> 
      <p>This is div 1</p> 
     </div> 

     <div class="z-low faded-out" style="flex-direction: row; margin-top: 500px;"> 
      <p>This is div 2</p> 
     </div> 

     <div class="panel relative cols-reversed z-low faded-out" style="flex-direction: row; margin-top: 500px;"> 
      <p>This is div 3</p> 
     </div> 

</div> 
</div> 

перепыл JS:

<script> 
    jQuery(function() { 
     var button = '[data-role="option-picker"]', 
      snippet = '[snippet]', 
      fadedOut = 'z-low faded-out', 
      fadedIn = 'z-med faded-in'; 

     jQuery(button).on('mouseover', function (event) { 
     var $this = jQuery(this); 
     var $snippet = $this.closest(snippet); 
     var $panels = $snippet.find('.panel'); 
     var index = $this.parent().index(); 

     event.preventDefault(); 
     event.stopPropagation(); 
     $panels.filter('.faded-in').removeClass(fadedIn).addClass(fadedOut); 
     jQuery($panels.get(index)).removeClass(fadedOut).addClass(fadedIn); 
     $snippet.find(button).parent().removeClass('selected'); 
     $this.parent().addClass('selected'); 
     }); 
    }); 
    </script> 

Извините за портя выравнивания, СЙ ужасно (используют основные HTML текстовых блоков).

Answer 1

Вы можете добавить фрагмент в URL-адрес, определяющий, какой div должен быть видимым. Что-то вроде этого:

www.mysite.com/pagewithfourdivs.html#div3 

И затем, на странице загрузки, вы можете прочитать значение фрагмента (например, #div3) от window.location.hash и скрыть/показать дивы соответственно.