我可以为我的页面中的一些不同ID（模式）分配外部链接吗？

Question

我不能写一个唯一的javascript，可以分配ID被直接链接访问和显示。在页面上，我有这个图片和标题库：

  <div class="modal-item">
        <a onclick="document.getElementById('id001').style.display='block'" class="item-link">
          <img class="thumb" src="image001"/>
      </div>
        <div id="id001" class="modal">
            <div class="modal-content">
                            <img alt="" src="image001big"/>
                        </div>
                     <caption></caption>
                </div>
            </div>
        </div>  
  <div class="modal-item">
        <a onclick="document.getElementById('id002').style.display='block'" class="item-link">
          <img class="thumb" src="image001"/>
      </div>
        <div id="id002" class="modal">
            <div class="modal-content">
                            <img alt="" src="image002big"/>
                        </div>
                     <caption></caption>
                </div>
            </div>
        </div>
...

但是经过我所有的研究，我只到这一步，它不起作用。另外，我不应该每次都需要取消指定id，否则我会用脚本填充页面。

 <script type='text/javascript'>
$(document).ready(function() {

  if(window.location.href.indexOf('#id0743') != -1) {
    $('#id0743').modal('show');document.getElementById('id0743').style.display='block';
  }

});
</script>

Answer 1

有一个更简单的方法来做到这一点。窗口已经有一个名为window.location.hash的内置对象，如果您转到https://example.net/#id001，它将返回#id001。

位置接口的哈希属性返回一个USVString，其中包含一个“#”，后跟URL的片段标识符——URL试图瞄准的页面上的ID。

该片段未进行百分比解码。如果URL没有片段标识符，则此属性包含空字符串“”。

请注意，我正在手动分配ID，但这是单独的，因为我无法从窗口获取实际的哈希值。

$(document).ready(function() {
    let id = window.location.hash;
  id = "#id002";
  
  $(id).css('display', 'block');
});

// Pure JS example
window.addEventListener('load', (event) => {
  let id = window.location.hash.substring(1);
  id = "id001"
  document.getElementById(id).style.display='block';
});

.modal {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-item">
  <a onclick="document.getElementById('id001').style.display='block'" class="item-link">
    <img class="thumb" src="https://www.fillmurray.com/200/200" />
  </a>
</div>

<div id="id001" class="modal">
  <div class="modal-content">
    <img alt="" src="https://www.fillmurray.com/2000/2000" />
  </div>
  <caption></caption>
</div>


<div class="modal-item">
  <a onclick="document.getElementById('id002').style.display='block'" class="item-link">
    <img class="thumb" src="https://www.fillmurray.com/199/199" />
  </a>
</div>

<div id="id002" class="modal">
  <div class="modal-content">
    <img alt="" src="https://www.fillmurray.com/1999/1999" />
  </div>
  <caption></caption>
</div>