javascript - 根据附加到 URL 的内容加载不同的 DIV 内容

标签 javascript

我觉得这个问题有一个简单的答案,但我的谷歌功能让我失望了。我目前拥有的是几个链接,一旦单击,就会更改 DIV 中的 HTML 内容。

<a href="#new" onclick="document.getElementById('body').innerHTML
= '<p>NEW</p>';">NEW!</a>

但我希望能够链接到此内容。无论如何,是否可以通过访问诸如 www.blahblah.com/index.html#new 之类的 URL 来链接到此内容,以便它自动加载新的 HTML 代码?

如果我是个白痴,请原谅我...我对 javascript 还很陌生。

最佳答案

您可以使用 window.location.hash 查看 URL 上的哈希值,并根据该哈希值显示正确的 DIV。假设您的所有 div 都在页面上,一旦您知道要显示的 div,您将执行以下操作:

document.getElementById(idOfDivToShow).style.display='block';

小例子:

<html>
  <head>
    <script type="text/javascript">
      function loadDiv() {
        if(window.location.hash == '#div1')
          document.getElementById('div1').style.display = "block";
        else if(window.location.hash == '#div2')
          document.getElementById('div2').style.display = "block";
      }
    </script>
  </head>
  <body onload="loadDiv()">
    <div style="display:none" id="div1">div1</div>
    <div style="display:none" id="div2">div2</div>
  </body>
</html>

关于javascript - 根据附加到 URL 的内容加载不同的 DIV 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5227144/

相关文章:

javascript - DOMContentLoaded 与 Web 组件有什么关系?

JavaScript Asp.net 重复控件

javascript - spring-mvc中将json解析为具有其他对象属性的java对象

javascript - 如何在 React 中创建对象的新实例?

javascript - 在 href 和 ui-sref 之间切换

javascript - 在 React Native 中使用 map() 列出数组元素

javascript - 更改类名时 CSS 不会更改

javascript - 使用 jQuery 更改 html 位置

javascript - Bootstrap select picker 根据key自动排序

javascript - 我怎样才能让这段代码在 IE 中运行?