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