Question

用例：

我已经设计了使用HTML和CSS \ Js的sidbar导航，如下所示。让我们命名为 index.html

我还有另一个HTML，例如 Dashboard.html ，其布局如下图所示

现在，如果我点击 index.html 中的“实时执行” ，则仪表板。HTML应该在主 index.HTML中显示内容而不影响侧边栏导航和标题

我是UI编码的新手，所以我对所有可用的选项都感到困惑，我该如何实现以上结果！

更新的代码-使用Jquery

我能够通过@Hien Nguyen提供的输入解决此问题

我必须在load（）函数生效之前放置一个div类，然后引用该div类来调用load（）

Index.Html

<li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
                    <i class="far fa-chart-bar"></i>
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#" onclick="load()">Live Execution
                            <i class="fas fa-chart-line"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Error Analysis
                            <i class="fas fa-bug"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Rerun failed Tc
                            <i class="fas fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <li>

</script>
{% block second %}
<div id="content1" class="col-xs1 centre-block text-center" style="width:100%">
</div>
        <script type="text/javascript">

            function load_jumbo() {

//     document.getElementById("content").innerHTML='<object type="text/html" data="dashboard.html" ></object>';
            $("#content1").load("jumbotron.html");

}
</script>
{% endblock %}

Answer 1

您可以在点击标签时使用它。

function load(file) {

     document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}

如果您使用jquery，请更改为$("#content").load("flex.html");

更新：

如果您尝试在本地打开html文件，则需要为浏览器允许启用CORS设置安全性。 Disable same origin policy in Chrome

您应该使用Web服务器打开文件。我在免费主机中托管样本。有效

https://viethien.000webhostapp.com

function load(file) {
     
     document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}

<li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
                    <i class="far fa-chart-bar"></i>
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#" onclick="load()">Live Execution
                            <i class="fas fa-chart-line"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Error Analysis
                            <i class="fas fa-bug"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Rerun failed Tc
                            <i class="fas fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </li>
<li>

<div id="content" style="width:100%"></div>

Answer 2

您可以尝试以下操作：

Index.html

<html> 
<head>......</head>
<script>
   function loadView(_view, _el) {
      //check if already selected view
      if ($(_el).hasClass("menuItemSelected")) {
          return;
       }

         //set selected
         $(".menuItemSelectable").removeClass("menuItemSelected");
         $(_el).addClass("menuItemSelected");

         loadSinglePage(_view);
        }
</script>
<body>
    .......
    //your sidebar here
   <a href="#dashboard" class="menuItemSelectable menuItemSelected" onclick="loadView('dashboard', this);"><i class="fa fa-dashboard" aria-hidden="true"></i><span class="nav-label">dashboard</span></a>
   <a href="#liveexec" class="menuItemSelectable" onclick="loadView('liveexec', this);"><i class="fa fa-globe" aria-hidden="true"></i> <span class="nav-label">Live Execution></span></a>

</body>

</html>

然后您将拥有一个JS文件，该文件将处理其余页面。

Content.js

//初始化页面

var execContent = undefined;
var scheduleContent = undefined;

function loadPages() {

    // initialize your panels here
    $("#divSearchPanel").load("Pages/Search/search.html", function (response, status, xhr) {

        //progress
        $("#divProgressLoader").load("Pages/Search/progress.html", function (response, status, xhr) {
            loadProgress.init($("#divProgressLoader"));
        });

        searchPage.init($("#divSearchPanel"));

        //dashboard
        loadSinglePage("dashboard");
    });
   //call the loadpage function
   loadPage("dashboard");

}

//load the page


   function loadSinglePage(pageId) {

    currentPage = pageId;
    var contentDiv = $("#divPageContent");
    contentDiv.html("");

    if (pageId == "dashboard") {
        contentDiv.load("Pages/Dashboard/dashboard.html", function (response, status, xhr) {
            dashboardContent.init(contentDiv);
        });
    }

    if (pageId == "liveexec") {
        contentDiv.load("file/location/liveexec.html", function (response, status, xhr) {
            execContent .init(contentDiv);
        });
    }

然后您的页面将看起来生动：

liveexec.html

<div style="">
    <table style="width: 100%; height: 100%;" cellpadding="10" cellspacing="10">
        <tr>
            <td id="divgraph"></td>

        </tr>
        <tr>
            <td id="divbuttons"></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var execContent = execContent || {};

    (function (pub) {
        var _dom = null;

        pub.init = function (dom) {
            _dom = dom;
            //load graphs
            _dom.find("#divgraph").load("graph.html", function (response, status, xhr) {
                riskComparisonGraph.init(_dom.find("#divgraph"));
            });

        }

    })(liveexecContent || {});

</script>

如何在按钮上单击主索引html内加载html

2 个答案: