隱藏的div中的錨鏈接

Question

因為我使用的是非常有限的舊CMS，所以我沒有太多選擇。 我希望這是可能的：

我有一個4格的頁面。 第一個始終可見，而其他的則通過淡入和淡出類隱藏。 借助鼠標懸停功能，訪客可以將鼠標懸停在其他位置上。 當前的活動div會逐漸消失為新的div。 到現在為止還挺好。 （這是通過普通的javascript完成的，因為網站上的jQuery很舊，我無法更新它）。

我現在需要的是能夠鏈接到其他頁面上的其他div的功能。 我嘗試了以下方法：

在javascript中進行切換功能以隱藏/顯示相關的div。 我試圖從另一頁調用此函數，但似乎不可能。 還有其他方法嗎？ 讓我知道您是否需要更多詳細信息。

我使用了搜索功能，並找到了一些“隱藏元素中的錨鏈接”主題，但是由於它們處在不同的情況下，因此該解決方案不適用於我！

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

很抱歉弄亂對齊方式，cms太糟糕了（使用基本的html文本塊）。

Answer 1

您可以將片段添加到URL，以標識哪個div應該可見。 像這樣：

www.mysite.com/pagewithfourdivs.html#div3

然后，在頁面加載時，您可以從window.location.hash讀取片段值（例如#div3 ）並相應地隱藏/顯示div。