Question

您好，我的代码如下：

<body>
    <div id="page">
    <div id="header">declaration</div>
    <div id="content">
         <div id="option">
            <span class='names'>
                <a href="#">show chapter 1.1.1 content</a>&emsp;
            </span>1.1.1 Chapter name<br />
            <span class='names'>
                <a href='#'>show chapter 1.1.1.1 content</a>&emsp;
            </span>1.1.1.1 Chapter name<br />
    </div>
            </div>
    <div id="footer">declaration</div>
    </div>
</body>

当用户点击显示链接时，网页会打开一个HTML文件并从文件中打印所选章节的内容。（它保存在content.html文件中，内容的id为章节名称）文件示例：

<div id="s1"><h1>1 Chapter</h1>
    <div id="s1.1"><h1>1.1 Chapter</h1>
        <div id="content1.1">
        data
        </div>
            <div id="s1.1.1"><h1>1.1.1 Chapter</h1>
                <div id="content1.1.1">
                    data
                </div>
            </div> 
        </div>
    </div>  
</div>

当用户点击＆＃34;显示章节1.1.1内容＆＃34;网页生成此代码：

<body>
        <div id="page">
        <div id="header">declaration</div>
        <div id="content">
            <div id="s1.1.1"><h1>1.1.1 Chapter</h1>
                   <div id="content1.1.1">
                       data
                   </div>
               </div> 
            </div>
        </div>     
        <div id="footer">declaration</div>
</body>

我正在尝试此代码，但它无法正常工作，我不知道如何打开html文件，只解析了一些具有特定ID的

<script type="text/jscript" language="javascript">
    var ul = document.querySelector('#option');
    ul.onclick = function (e) {
        var evt = e || window.event;
        var target = evt.target || evt.srcElement;

        var p = document.querySelector('#content');
        p.innerHTML = 'Clicked on ' + target.innerHTML;

        return false;
    };
</script>

Answer 1

我不确定你到底想要做什么，但下面的代码会让事情变得更清晰。

<script type="text/jscript" language="javascript">

  setTimeout(function () {

          var spanNames = document.querySelectorAll('.names'),
              content = document.querySelector('#content');

            for (var i = 0; i < spanNames.length; i++) {

              spanNames[i].onclick = function () {

              content.innerHTML = 'Clicked on ' + this.querySelector('a').innerHTML;

               return false;
              };
          };
     }, 1000);
</script>

如果你试图在远程服务器上检索html文件并将其内容添加到DOM元素，那么你就会错过很多代码，就像在AJAX调用中一样。

选择选项后，将HTML数据加载到DIV中

1 个答案: