在锚点处链接到另一个页面并显示 div答案

【问题标题】：Link to another page at an anchor point and also show div在锚点处链接到另一个页面并显示 div
【发布时间】：2018-09-29 04:22:11
【问题描述】：

我想要一个链接，将您带到不同的 HTML 页面，下至特定的锚标记，并显示默认隐藏的 div。

我知道如何链接到另一个页面以及该页面上的锚点。

<a href="anotherpage.html#anchor5">Link</a>

在 anotherpage.html 上，我有显示该 div 的代码。

<a onclick="toggle_visibility('hiddendiv');">Show div</a>

Javascript 是这样的：

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

但我不知道如何让第一个链接也执行第二个链接正在执行的操作。这可能吗？这是针对本地站点的，所以我认为我仅限于 HTML、Javascript 和 CSS。

编辑：我将在 Tipue Search (http://www.tipue.com/slide/) 中使用它。我将让搜索结果指向特定页面上的特定部分，这些部分具有默认隐藏的 div。但在这些部分中，有显示这些 div 的按钮。我还包括了我在上面使用的 Javascript。

【问题讨论】：

如果您的用户将带有锚点的链接添加为书签，您还希望隐藏的 div 出现吗？如果是这样，请查看w3schools.com/jsref/prop_loc_hash.asp

标签： javascript html css

【解决方案1】：

带有第二个链接的 HTML 页面要么有一个 <script> 标记，指向提供 toggle_visiblility 函数的外部 javascript 文件，要么该函数直接在页面上定义。

如果您通过链接到 javascript 文件 <script src="myscripts.js"></script> 或将定义直接复制到 <script> 标记来添加函数定义。

一旦toggle_visibility 函数在您的页面上可用，第一个链接可以简单地读为<a href="anotherpage.html#anchor5" onclick="toggle_visibility('hiddendiv');">Link</a>，显然将hiddendiv 替换为适当的字符串。

【讨论】：

我试过这个。该链接将我带到 anotherpage.html#anchor5，但 div 不可见。
帮助我了解您的目标：您单击第一个链接，该链接转到 anotherpage.html#anchor5 。你现在在第二页。你想在第二页隐藏一个 div，还是在第一个链接的页面上隐藏一个 div？
我想在一个页面 (index.html) 上有一个链接，以转到 anotherpage.html#anchor5 并在 anotherpage.html 上取消隐藏 div。这有意义吗？
您需要某种方式将消息传递给 anotherpage.html ，例如 URL 参数，然后在 anotherpage.html 上有额外的代码来处理您的 URL 参数并执行相应的操作（在你的情况，这意味着隐藏一个div）。因此，您在第一个链接上的 href 将是 anotherpage.html#anchor5&hidediv=hiddendiv，然后您将在 anotherpage.html 上运行在启动时运行的代码，查找名为 hidediv 的 url 参数并隐藏与给定值匹配的 div。这是有关此主题的众多可用教程之一davidwalsh.name/query-string-javascript

【解决方案2】：

请您查看此项目：https://github.com/nezirz/anchor_scroll

第一页仅包含指向第二页的链接：

<div>
    <a href="index2.html#anchor2"> go to index2 and show diw </a>
</div>

第二页包含此代码：

<div>
    <div id="anchor1" style="background-color:blue; height:500px;">

    </div>
</div>
<div>
    <div id="anchor2" style="background-color:green; height:400px;display: none;">

    </div>
</div>
<div>
    <div id="anchor3" style="background-color:red; height:200px;">

    </div>
</div>
<script>
    window.onload = function() {

        var anchor =  window.location.hash.substr(1);
        console.log(anchor);
        setTimeout(function(){ 
            myFunction(anchor);
            Element.prototype.documentOffsetTop = function () {
                return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
            };

            var top = document.getElementById( anchor ).documentOffsetTop() - (window.innerHeight / 2 );
            window.scrollTo( 0, top );


         }, 2000);
         function myFunction(element) {
             console.log(element);
            var x = document.getElementById(element);
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
    }

    };
</script>

这只是概念证明，请根据您的确切要求对其进行更新。我认为这对你来说并不复杂。

【讨论】：