html 元素已加载到我的 html 页面中，但未显示 - 难以修复？答案

【问题标题】：html element is loaded inside my html page but not displayed - hot to fix?html 元素已加载到我的 html 页面中，但未显示 - 难以修复？
【发布时间】：2021-08-26 11:59:03
【问题描述】：

我有一个主 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 函数，该函数仅在您单击图形节点时调用。

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

【问题讨论】：

一般来说，混合使用 jQuery 和 Angular 似乎是个坏主意。为什么不使用 Angular 功能来加载新内容？
怎么样？这几天我一直在困惑。任何能解决我的问题的解决方案都适合我。
您想要一个仅使用 ajax 的解决方案吗？因为我不知道ajax。但我有使用 Bootstrap/css 和 javasctipt 的解决方案。
@OmkarKalantre，是的，我也同意你的解决方案，谢谢
好的，我会在几分钟后发布答案。

标签： javascript html d3.js

【解决方案1】：

这是您的解决方案...

第一：

只需将要添加的数据保留在您的点击中

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

第二： 只需添加 css 属性 display: none

#includedContent {
    display: none;
}

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

第三： 使用 java 脚本设置 onclick 函数

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

此代码在单击您的 h1 标签“Tranning”时起作用。你可以把它放在任何地方。就是这样.. 如需更多许可，请查看下面附加的代码 sn-p.. 我只使用了基本的 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>

【讨论】：

谢谢，我稍后试试这个解决方案！
它有效，你能告诉我如何重新加载步进器所在的 div 的内容吗？因为如果我更改点击的节点，步进器不会从头开始，而是总是从最后一步开始。