javascript - 隐藏 div 中的 anchor 链接

Question

因为我使用的是非常有限且陈旧的 CMS，所以我没有太多选择。我希望这是可能的:

我有一个包含 4 个 div 的页面。第一个总是可见的，其他的通过类淡入和淡出隐藏。使用鼠标悬停功能，访问者可以通过悬停使其他人可见。当前事件的 div 淡入新的 div。到目前为止，一切都很好。 (这是使用纯 javascript 完成的，因为网站上的 jQuery 很旧，我无法更新它)。

我现在需要的是能够从其他页面链接到其他 div。我尝试了以下方法:

在 javascript 中创建一个切换函数来隐藏/显示相关的 div。我试图从其他页面调用这个函数，但似乎不可能。还有另一种方法吗？如果您需要更多详细信息，请告诉我。

我使用搜索功能找到了一些“隐藏元素中的 anchor 链接”主题，但由于它们处于不同的情况，遗憾的是解决方案不适用于我!

带有 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 文本 block )。

Answer 1

您可以将片段添加到 URL 以标识哪个 div 应该是可见的。像这样:

www.mysite.com/pagewithfourdivs.html#div3

然后，在页面加载时，您可以从 window.location.hash 中读取片段值(例如 #div3 )并相应地隐藏/显示 div。