Question

我希望有一个链接，该链接将带您到其他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。

Answer 1

带有第二个链接的HTML页面具有一个subprocess.call(command, shell=True)标记，该标记指向提供<script>函数的外部javascript文件，或者该函数直接在页面上定义。

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

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

Answer 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>

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

在定位点链接到另一个页面并显示div

2 个答案: