HTML загрузите содержимое div в файл html в другой файл html

Недавно я начал немного изучать HTML, и у меня есть некоторые сомнения. Мое намерение состоит в том, чтобы сделать на первой странице раздел div, который может изменяться в зависимости от элемента, который вы нажимаете на меню (вместо того, чтобы переносить вас в другой HTML).
Я попробовал несколько вещей с javascript, чтобы увидеть, если я мог бы сделать его работу, но я ничего не достигаю, несмотря на это в других сообщениях, что данное решение.

Это то, что у меня есть до сих пор:

.sideNav {
	position: fixed;
	width: 250px;
	height: 100vh;
	left: 0;
	right: 0;
	background-color: red;
	top: 60px;
}

.contentWrapper {
	margin: 60px 0 0 250px;
	padding: 0 30px;
	left: 0;
	top: 0;
	background-color: blue;
}
<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset = utf-8>
		<link rel = "stylesheet" href = "./assets/stylesheets/main.css">
		<script type="text/javascript">
			function toggleMenu(id) {
				var menuBox = document.getElementById(id);
				if(menuBox.style.display == "block") {
					menuBox.style.display = "none";
				} else {
					menuBox.style.display = "block";
				}
			}
		</script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
    			$(".menuAnchor").on("click", function() {
    				event.preventDefault();
    				$("#contentWrapper").load("food.html" + " #contentWrapper");
        return false;
        		)};
        	)};
		</script>
		<title>The Nest</title>
		
		
	</head>
	<body>
		<aside class = "sideNav">
			<div>
				<a class = "menuAnchor"  onclick = "toggleMenu('foodMenu')"> Food</a>
				<ul class = "menuBox" id = "foodMenu" style = "display : none">
					<li>
						<a id = "burguer" href = "#">Burguer</a>
					</li>
					<li>
						<a id = "hotDog" href = "#">Hot Dog</a>
					</li>
					<li>
						<a id = "pizza" href = "#">Pizza</a>
					</li>
				</ul>
			</div>
		</aside>
		<div id = "contentWrapper">
			<section class = "contentWrapper">
				d
			</section>
		</div>
	</body>
</html>

Это другой файл HTML:

<!DOCTYPE html>

<html lang="en">
	<body>
		<div id = "contentWrapper">		
			<section class = "contentWrapper">
				<h1>Food</h1>
				
				<article id = "burguer">
					<h2>Burguer</h2>
					<p>
						Burguer
					</p>
				</article>
				<article id = "hotDog">
					<h2>Hot Dog</h2>
					<p>
						Hot Dog
					</p>
				</article>
				<article id = "pizza">
					<h2>Pizza</h2>
					<p>
						Pizza
					</p>
				</article>
			</section>
		</div>
	</body>
</html>

Я хотел этого, когда я нажимаю строку (кнопку в будущем), меню каскадируется, и «p», которое появляется в разделе div, изменится на вторую HTML-информацию, но я мог только ссылаться на другую страницу.

Как я сказал, часть этих сценариев, кажется, работает, поскольку сценарий загрузки div находится в других ответах, но не может заставить его работать на меня.

Я не уверен, что то, что я делаю и как я это делаю, является лучшим вариантом.

Спасибо и извините за беспокойство.


То, что я пытаюсь, это, имея основной html с головой и меню:

Графика для основного html

Будучи содержание изменилось с другим из других html, скажем, еда, когда одна из ссылок в меню нажата.

1 ответ

  1. То, что вы спрашиваете, довольно неясно, однако, я предложу решение, основанное на моем понимании вашего вопроса:

    Если вы хотите иметь некоторый html, который используется для замены содержимого div, рассмотрите тег шаблона: https://developer.mozilla.org/en/docs/Web/HTML/Element/template

    Шаблоны не отображаются, но могут быть доступны с помощью jQuery (который, как я вижу, вы используете), например:
    формат html:

    <div id="replace-area">
    </div>
    <template id="replace-content">
        <ol>
            <li>Here</li>
            <li>Are</li>
            <li>Some</li>
            <li>Items</li>
        </ol>
    </template>
    

    jQuery:

    $("replace-area").html($("replace-content").clone().html());
    

    С заменой-область, содержащая содержимое, которое вы хотите, чтобы пользователь видел в конце и заменить-содержание, содержащее содержимое, которое вы хотите поместить в замене-область.

    Это приведет к:

    <div id="replace-area">
        <ol>
            <li>Here</li>
            <li>Are</li>
            <li>Some</li>
            <li>Items</li>
        </ol>
    </div>
    <template id="replace-content">
        <ol>
            <li>Here</li>
            <li>Are</li>
            <li>Some</li>
            <li>Items</li>
        </ol>
    </template>
    

    С только div быть видимым.

    Надеюсь, это поможет вам получить то, что вы ищете.