Question

我不确定这是否可行。

我想使用不同的内容页面制作相同的页眉和页脚。我目前的课程仅涵盖HTML，JS，CSS和JQuery。

这是我目前的身体，简化：

<div id="header">
   <ul>
      <li><a href="#" onclick="contentOne()">Content One</a></li>
      <li><a href="#" onclick="contentTwo()">Content Two</a></li>
   </ul>
</div>

<div id="contents">
   <object id="change" data="contentOne.html" type="text/html" height="100%" width="100%">
   </object>
</div>
<div id="footer">
   <p>The footer</p>
</div>

头脑里面是这样的：

<head>
   <script>
      function contentOne(){
         document.getElementById("change").data = "contentOne.html";
      }

      function contentTwo(){
         document.getElementById("change").data = "contentTwo.html";
      }
   </script>
</head>

问题是，我无法改变内容。看起来它会起作用，但是，例如，点击ContentTwo，不会加载contentTwo。页面保持不变。

Answer 1

您应将setAttribute用于本机JS，或.prop用于jquery：

 function contentOne(){
        // native
        var element =  document.getElementById("change");
        element.setAttribute("data", "contentOne.html");

        // jquery
        $("#change").prop("data","contentOne.html");
      }

确保正确关闭属性值，height="100% width="100%>错误，object元素也应使用</object>关闭：

 <object id="change" data="contentOne.html"  
     type="text/html" height="100%" width="100%"></object>

Javascript - 更改对象数据源

1 个答案: