html 元素加载到我的 html 页面中但未显示 - 热修复？

Question

我有一个主index.html页面，其中包含一个用 d3.js 制作的图表：

<html>
<head>

    <title>Training</title>
    <meta name="description">
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/architecturetree/css/tree.css" />
    
</head>

<body>
  <div id="graph"> <!-- View the graph-->
    <h1><i class="fa fa-book"></i> Training</h1>
    <p>&nbsp;</p>

  <div id="includedContent"></div>

</body>
</html>

我想在单击树节点时向 index.html 页面添加一个步进器。 所以我在我的tree.js中添加了以下代码部分：

$.ajax({url:'views/stepper.html',success:function(data){$("#includedContent").html(data)}})

应该添加 .html 文件来显示步进器。

这个文件（ stepper.html ）如下：

<div class="step">
  </br></br></br>
    <md-card ng-init="step2.disabled = true; step3.disabled = true; selected = 0">
      <md-steppers  md-selected="selected" md-stretch-steppers="always">
        <md-step label="Lab1" md-complete="step1.completed"> 
          <md-content>
            <iframe id="iframe0" name="myIframe0" frameborder="5" width="1500" height="1500"></iframe>
            <md-button type="submit" class="md-raised md-primary" ng-click="selected = 1; step1.completed=true; step2.disabled = false">NEXT</md-button>
          </md-content>
        </md-step>
        <md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2.disabled">
          <md-content>
            <iframe id="iframe1" name="myIframe1" frameborder="5" width="1500" height="1500"></iframe>
            <md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
            <md-button class="md-raised md-primary" ng-click="selected = 2; step2.completed=true; step3.disabled=false">NEXT</md-button>
          </md-content>
        </md-step>
        <md-step label="End" md-complete="step3.completed" ng-disabled="step3.disabled">
          <md-content>
            <h1>
            All done!
            </h1>
            <h5> </br> You have completed this training path. </br> You can go back through the labs or select another training.
            </h5>
            <md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button>
            <md-button class="md-raised md-primary" ng-click="step2.disabled = true; step3.disabled = true; selected = 0">START</md-button>
          </md-content>
        </md-step>
      </md-steppers>
    </md-card>
  </div>

因此，在这种情况下，带有步进器的块已加载但未显示。 只出现一个白色块。 如果我从浏览器中执行“检查元素”，stepper.html 的内容实际上存在，只是没有显示。 可能是什么问题呢？

使用 index.html 中的div ng-include = "views / stepper.html"步进器出现，但我需要 javascript 中的 function 仅当您单击图形的节点时才调用它。

在图片中，您可以看到底部出现的白色框。

Answer 1

这是您的解决方案...

第一的：

只需保留要添加 onclick 的数据

<div id="includedContent">
<!-- here your data to add onclick -->
</div>

第二：并添加它 css 属性显示：无

#includedContent {
    display: none;
}

注意：不要使用内联 css 方法来设置属性 display: none

第三：使用java脚本设置onclick function

onclick="document.getElementById('includedContent').style.display='block'"

此代码适用于您的 h1 标签“Tranning”的 onclick。 你可以把它放在任何地方。 就是这样..为了获得更多许可，请查看下面附带的代码片段..我只使用了基本的 html、css，js 所以你的图表不可见但你可以看到添加的文本部分也是可见的..

希望你能明白。 祝你有美好的一天。

 #includedContent { display: none; }

 <html> <head> <title>Training</title> <meta name="description"> <meta charset="utf-8"> <link rel="stylesheet" href="assets/architecturetree/css/tree.css" /> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="graph"> <.-- View the graph--> <h1 onclick="document.getElementById('includedContent').style;display='block'"><i class="fa fa-book"></i> Training</h1> <p>&nbsp.</p> <div id="includedContent"> <div class="step"> </br> </br> </br> <md-card ng-init="step2;disabled = true. step3;disabled = true. selected = 0"> <md-steppers md-selected="selected" md-stretch-steppers="always"> <md-step label="Lab1" md-complete="step1;completed"> <md-content> <iframe id="iframe0" name="myIframe0" frameborder="5" width="1500" height="1500"></iframe> <md-button type="submit" class="md-raised md-primary" ng-click="selected = 1. step1;completed=true. step2.disabled = false">NEXT</md-button> </md-content> </md-step> <md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2;disabled"> <md-content> <iframe id="iframe1" name="myIframe1" frameborder="5" width="1500" height="1500"></iframe> <md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button> <md-button class="md-raised md-primary" ng-click="selected = 2. step2;completed=true. step3.disabled=false">NEXT</md-button> </md-content> </md-step> <md-step label="End" md-complete="step3.completed" ng-disabled="step3.disabled"> <md-content> <h1> All done. </h1> <h5> </br> You have completed this training path. </br> You can go back through the labs or select another training; </h5> <md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button> <md-button class="md-raised md-primary" ng-click="step2.disabled = true; step3.disabled = true; selected = 0">START</md-button> </md-content> </md-step> </md-steppers> </md-card> </div> </div> </body> </html>

html 元素加载到我的 html 页面中但未显示 - 热修复？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-08-26 14:22:53

html 元素加载到我的 html 页面中但未显示 - 热修复？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-08-26 14:22:53

解决方案1
1 已采纳 2021-08-26 14:22:53