正确解释网址参数和＃标签

问题描述

让我们说一个html文档有两个块，因此您只能看到其中一个的内容，使用下面的相同javascript函数通过菜单按钮和/或url参数进行切换

<div class="block1"> 
    <p id="tag11"> content11 </p>
    <p id="tag12"> content12 </p>
</div>
<div class="block2"> 
    <p id="tag21"> content21 </p>
    <p id="tag22"> content22 </p>
</div>

（带有网址参数）（示意性地）：

<script type="text/javascript">
    function onSTART(){
        var url = new URL(window.location.href); 
        var show = url.searchParams.get("show"); 
        switch(show) { 
        case "b1":  
        showBLOCK1(); 
        break; 
        case "b2":  
        showBLOCK2(); 
        break; 
        default: 
        doSOMETHINGELSE(); 
    }
    window.onload = onSTART; 
</script>

现在提问。我想使用url访问特定内容 http://.......htm?show=b2#tag22

但是它并不能如我所愿。在我看来，首先将文档加载，然后将其定位在提供的主题标签上，然后才应用js函数。结果，内容放错了位置。显然我不明白它是如何工作的。

我使用的方法/风格好吗？同样，我想显示某些块并使用url参数和＃标签将此块的内容定位。有可能吗？

谢谢！

解决方法

onSTART函数结尾的以下行解决了该问题：

if(window.location.hash) {location.hash = window.location.hash.substr(0);} 

该解决方案可能不是很好，但它确实有效。