时间戳

首页 > 解决方案 > HTML - 是否可以容器视图？

jquery - HTML - 是否可以容器视图？

问题描述

所以，我对静态 HTML 编程很陌生，因为我只使用 Angular 作为前端框架将近一年。

我想要的是：

我的想法：

从 Java 编程中，我知道继承的概念（以及组合......），因此我认为拥有一个包含子页面作为容器的起始页可能很不错。它也可以与使用 Latex-Documents 进行比较：使用设置构建一个 Main-File，并使章节仅包含文本。

我的方法：

作为起点，我有一个 index.html 文件。在这个文件中定义了 -Element（它使用 jquery $().load("url")-feature 来包含来自外包文件的标题）我在左侧还有一个菜单栏，其中包含一个<ul>-list 和许多<li>-elements。这些 li 元素通过将它们的前缀作为参数添加到当前 url 来引用可能的子页面，例如：

https://<my-homepage>.com/index.html?my-subpage

在任何重定向上都会触发一个 jquery-script，它会尝试将子页面加载到 div-container 当参数不适合当前子页面时，将加载默认页面。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="./resources/bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" type="image/x-icon" href="resources/logo.ico">
    <script src="resources/jquery.min.js" type="application/javascript"></script>
</head>
<body style="overflow-x: hidden; overflow-y:hidden">

<header id="header" class="header">
    <script>
        $("header").load("./header/header.html");
    </script>
</header>
<hr>
<div class="d-flex">
    <div class="sidebar">
        <ul>
            <li>
                <a href="?subpage">Subpage</a>
            </li>

            <li>
                <a href="?subpage2">Subpage Two</a>
            </li>
        </ul>
    </div>
    <div id="container" class="main">
        <script>
        var param = window.location.search.substr(1);
        var url = './' + param + '/' + param + '.html';

        var http = new XMLHttpRequest();
        http.open('HEAD', url, false);
        http.send();
        if(http.status==200){
            $("#container").load(url);
        }else{
            $("#container").load("./default/default.html");
        }

        </script>
    </div>
</div>
</body>
</html>

我的问题（详细）：

首先，我想收集有关此主题的经验：

标签： jqueryhtml

解决方案

推荐阅读