Question

我是一名初学者HTML学习者，在途中我是自学成才的。这是我从头做过的第一个网站（使用HTML和CSS和JS）。我在这个网站上查看了有关此问题的其他问题和答案，但我遇到了其他问题无法解决的问题。许多答案表明＆＃34; window.onload = function（）{JavaScript}＆＃34;将解决该问题，但我在给定页面中有多个可能的功能。我使用innerHTML加载正文内容，而背景和导航在网页中是一致的。

我有四个按钮，有四种不同的功能：＆＃34;主页，关于，视频，研发＆＃34 ;;具有各自的功能：＆＃34; load_home（），load_about（），load_media（）和load_research（）。＆＃34;

我有它所以看起来像这样：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Script\jquery-ui-1.11.2.custom\jquery-ui.theme.css">
<link language="JavaScript"type="text/css" rel="stylesheet" href="Script\jquery-ui-1.11.2.custom\jquery-ui.css"></link>
<script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\external\jquery\jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript">
    $(function() {
        $( "input[type=submit], a, button" )
        .button()
        .click(function( event ) {
            event.preventDefault();
        });
    });
</script>
</head>
<body>
<div class="start"> <!--start refers to the CSS scope I added to the jQuery UI I have added for the buttons in my navigation-->
<nav>
<button onclick="load_home()" class="">Home Page</button>
<button onclick="load_about()" class="">About </button>
<button onclick="load_media()" class="">Videos</button>
<button onclick="load_research()" class="">Research and Development</button>
</nav>
</div>
</body>
<script type="text/javascript"> 
    function load_home() {
        document.getElementById("content1").innerHTML='<object type="text/html" data="Home.html"></object>';
            } 
    function load_about() {
        document.getElementById("Body").innerHTML='<object type="text/html" data="About Golding Lights.html"></object>';
            } 
    function load_media() {
        document.getElementById("Body").innerHTML='<object type="text/html" data="Media.html"></object>';
            } 
    function load_research() {
        document.getElementById("Body").innerHTML='<object type="text/html" data="Research and Development.html"></object>';
            } 
</script>
</html>

我之前在另一个我要开发的网站上使用过这个功能，它工作得很好。希望有一些答案可以帮助我。感谢。

Answer 1

如评论所示，您的HTML中似乎没有任何（很多）ID。

Body不是ID，它是标记名称。因为文档中只应该有一个body元素，所以可以使用document.getElementsByTagName('body')[0]访问它（该函数返回一个对象的集合/数组，[0]返回第一个元素）

您还可以向元素<body id="myBody">添加ID，以便您使用document.getElementById('myBody')

getElementById TypeError：“无法设置null的属性'innerHTML'

1 个答案: