如何在按钮单击时加载主索引html中的html [英] How to load an html inside main index html on button click

问题描述

用例：

我使用HTML和CSS \ js设计了一个sidbar导航，如下所示。我们可以将此名称命名为 index.html

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

现在如果我点击 index.html 中的'实施执行'，仪表板.HTML应显示主 index.HTML 内的内容，而不会打扰侧边栏导航和标题

我是UI编码新手，所以我对所有可用选项感到困惑，我怎样才能获得上述结果!!

更新代码 - 使用Jquery

我可以通过@Hien Nguyen提供的输入来解决这个问题

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

Index.Html

 < li class =active > 
< a href =＃homeSubmenudata-toggle =collapsearea-expandable =falseclass =dropdown-toggle>信息中心
< i class =far fa-图表杆>< I> /; 
< / a> 
< ul class =collapse list-unstyledid =homeSubmenu> 
< li> 
< a href =＃onclick =load（）>实时执行
< i class =fas fa-chart-line>< / i> 
< / a> 
< / li> 
< li> 
< a href =＃>错误分析
< i class =fas fa-bug>< / i> 
< / a> 
< / li> 
< li> 
< a href =＃>重新运行失败Tc 
< i class =fas fa-step-forward>< / i> 
< / a> 
< / li> 
< / ul> 
< / li> 
< li> 
 
< / script> 
 {％block second％} 
< div id =content1class =col-xs1 center-block text-centerstyle =width：100％> 
< / div> 
< script type =text / javascript> 
 
 function load_jumbo（）{
 
 // document.getElementById（content）。innerHTML ='< object type =text / htmldata =dashboard。 html>< / object>'; 
 $（＃content1）。load（jumbotron.html）; 
 
} 
< / script> 
 {％endblock％} 
  

解决方案

你可以单击标签时使用它。

 函数加载（文件）{
 
 document.getElementById（ content）。innerHTML ='< object type =text / htmldata =flex.html>< / object>'; 
} 
  

如果使用jquery更改为 $（＃ content）。load（flex.html）;

更新：

如果您尝试在本地打开html文件，则需要设置安全性以允许浏览器启用CORS。
在Chrome中停用相同的来源政策

您应该使用Web服务器打开文件。
我在免费主机中托管样品。它起作用

https://viethien.000webhostapp.com

  function load（file）{document.getElementById（content ）.innerHTML ='< object type =text / htmldata =flex.html>< / object>';}  

 < li class =active> < a href =＃homeSubmenudata-toggle =collapsearea-expandable =falseclass =dropdown-toggle> Dashboard< i class =far fa-chart-bar>< / I> < / A> < ul class =collapse list-unstyledid =homeSubmenu> <李> < a href =＃onclick =load（）>实时执行< i class =fas fa-chart-line>< / i> < / A> < /锂> <李> < a href =＃>错误分析< i class =fas fa-bug>< / i> < / A> < /锂> <李> < a href =＃>重新运行失败Tc< i class =fas fa-step-forward>< / i> < / A> < /锂> < / UL> < / li>< li>< div id =contentstyle =width：100％>< / div>  

Use case:

I have designed a sidbar navigation using HTML and CSS\Js as shown below. lets name this index.html

I have another HTML e.g. Dashboard.html , whose layout looks like below

Now if i click on 'Live Execution' in index.html, the dashboard.HTML should display the content inside the main index.HTML without disturbing the sidebar navigation and headers

I am new to UI coding , so i am confused with all the available option, How can I acheieve the above result !!

Updated code - With Jquery

I was able to resolve this by the input provided by @Hien Nguyen

I have to put a div class before the function load() comes into act , and then reference that div class to call 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 %}

解决方案

You can use this on click a tag.

function load(file) {

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

If you use jquery change to $("#content").load("flex.html");

Update:

If you try to open html file in local, you need setup security for browser allow enable CORS. Disable same origin policy in Chrome

You should use a web server to open file. I host sample in free host. It worked

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>

这篇关于如何在按钮单击时加载主索引html中的html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！