Я новичок в изучении HTML, и я был самоучкой на этом пути. Это первый веб-сайт, который я когда-либо делал с нуля (с использованием HTML, CSS и JS). Я просмотрел на этом сайте другие вопросы и ответы по этому поводу, но столкнулся с проблемой, которую другие ответы не решают. Многие ответы предполагают, что «window.onload = function() {JavaScript}» решит проблему, но у меня есть более одной возможной функции на данной странице. Я использую innerHTML для загрузки содержимого тела, в то время как фон и навигация соответствуют веб-странице.
У меня есть четыре кнопки с четырьмя разными функциями: «Домашняя страница, О нас, Видео, Исследования и разработки»; с соответствующими функциями: «load_home(), load_about(), load_media() и load_research()».
У меня так выглядит:
<!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>
Я использовал эту функцию раньше на другом веб-сайте, который собирался разработать, и она работала просто отлично. Надеюсь, есть ответы, которые могут мне помочь. Спасибо.
