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 中的一个函数，仅当您单击图形的节点时才调用该函数。

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

Answer 1

这是您的解决方案...

第一个：

只需将要添加的数据保存在

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

第二个： 并添加 css 属性显示：none

#includedContent {
    display: none;
}

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

第三名： 使用 java 脚本

设置 onclick 函数

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

此代码适用于点击您的 h1 标签“Tranning”。你可以把它放在任何地方。而已.. 如需更多许可，请查看下面附带的代码片段。我只使用了基本的 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 页面中但未显示 - 急于修复？

html element is loaded inside my html page but not displayed - hot to fix?

html

javascript

d3.js