根据附加内容加载不同的DIV内容

问题描述：

我觉得有这样一个简单的答案，但我的google-fu让我失望。我目前有几个链接，一旦点击，更改DIV中的HTML内容。根据附加内容加载不同的DIV内容

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

不过，每当我链接到www.blahblahblah.com/index.html#div1时，它都会自动跳转到div。我正在玩scrollTop，但这似乎没有帮助我。 – Anekdotos 2011-03-09 20:51:52

答

如果你使用jQuery，Mootools和原型可以使用history.js，它允许您根据散列设置具有特定内容的状态。

另请参阅https://gist.github.com/854622，了解嵌入脚本为您做ajax和内容交换 – balupton 2011-04-21 17:13:13

根据附加内容加载不同的DIV内容

相关推荐