试图分割我的HTML文件没有离开主页

Trying to split up my HTML files without leaving the main page

本文关键字：离开 主页 文件 HTML 分割 我的      更新时间：2023-09-26

我正在构建一个web应用程序，我使用以下代码来渲染一些漂亮的弹出式表单。

<a href="#x" class="overlay" id="addregion_form"></a>
<div class="popup">
    <h2>Add Region</h2>
    <a class="closeBut" href="Main.html#close" ng-click="showAdminMenuContainer()"></a>
</div>

到目前为止，我的应用程序，这是所有在main.html已经变得太大，我想把这种东西在单独的HTML文件。然后像这样链接到我的弹出窗口:

<div class="addbutton">                       
     <div>                            
          <a href="AddRegion.Html#addregion_form" id="addregion_pop">ADD</a>                            
     </div>
</div>

添加单独的文件AddRegion.html工作，但弹出跳转到一个完整的空屏幕。退出主页。基本上，我想使用嵌入在main.html中的漂亮的小文件，并且仍然能够像这样引用它们:

<a href="#addregion_form" id="addregion_pop">ADD</a>

我已经试过在'head'部分添加它们，但这似乎不起作用…

你应该在javascript中附加事件监听器，并在用户点击"ADD"链接时执行一些操作。然后你可以通过XHR (XMLHttpRequest)加载一些其他的html文件到你的文档。

你也可以只在javascript中构建html结构，然后将它们附加到文档中。

最好的方法是使用一些javascript框架，如jquery。你已经有一些angularjs的属性绑定到<a>标签，如果没有，请检查angularjs文档。如果没有关系，使用jquery。从start开始就简单多了:)

例如，如果它是jquery，你想加载其他html文件，你可以在结束body标签之前添加以下代码:

$(document).ready(function() {
$('#addregion_pop').on('click', function(e) {
    e.preventDefault();
    $.ajax({
            url: 'AddRegion.html',
            method: 'get',
            dataType: 'html',                
            success: function (response) {
                $(body).append(response);
            }
    });
});
});

李斯特提出的解决方案效果不错。使用Jquery包含HTML文件

我做了下面的事;

  • 包含j-query主脚本

  • 添加了这个小功能

    $(document).ready(function () { $("#Panel").load("/Partials/Panel.html"); $("#WelcomeText").load("/Partials/WelcomeText.html"); });

  • 添加了一个div，引用如下<div id ="Panel"> </div>

似乎你正在使用Angular(你的代码有ng-click)。我建议你看看https://github.com/angular-ui/ui-router。它允许你做你想做的事情:一个单独的main.html文件和单独的小块代码在单独的文件中(分而治之，关注点分离:)

我希望这对你有帮助。

如果答案给你指明了正确的方向，别忘了把答案标记为accepted:D

相关文章：