0

我有一个从模板中获取的非常简单的网页。在右侧，我有一个 div 中的链接列表，当单击它们时，我希望将位于我的服务器上的 html 页面加载到内部 div 区域中。单击链接时，没有任何反应。我还尝试将 innerHtml 设置为仅一个文本值，以防 src 部分无效，但这也无济于事。我错过了什么？这看起来像我经历过的所有示例。注意我只给出部分 html，所以我知道正文没有关闭等。

我有：

<body>
  <script>
    function results()
    {
      document.getElementsByClassName('mid-left-container').innerHTML="src="..\VRS_BVT\VRS_Test.html""
    }
  </script>

  <div id="main-wraper">
    <div id="top-wraper">
      <div id="banner">Automation Server</div>

    </div>
    <div id="mid-wraper">
      <div class="mid-wraper-top">
        <div class="mid-leftouter">
          <div class="mid-left-container">
            blah blah
          </div>
        </div>
        <div class="right-container">
          <div class="right-container-top">
            <h3><span class="yellow-heading">Projects</span></h3>
            <ul>
              <li><a href="#" onclick="results()">VRS BVT</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
4

1 回答 1

2

getElementsByClassName()返回匹配元素的数组（实际上是 NodeList）。

您正在innerHTML该数组上创建一个新属性，该属性无效。

相反，您需要从数组中获取一个实际元素并设置其innerHTML：

document.getElementsByClassName(...)[0].innerHTML = ...

此外，您的字符串文字是无效的语法。
您需要使用单引号或转义双引号。

此外，放入src="..\VRS_BVT\VRS_Test.html"HTML 元素的内容不会从服务器加载任何内容。
您需要使用 AJAX 或<iframe>.

于 2013-08-15T15:30:54.097 回答