我有一個主要的index.html頁面，上面有一個用d3.js制作的圖表：
<html>
<head>
<title>培訓</title> /span>
<meta name="description">/span>
<meta charset="utf-8">/span>
<link rel="styleheet" href="assets/architecturetree/css/tree. css" />
</head>
<body>
<div id="graph"> <！--查看圖表-->
<h1><i class="fa-book"> </i> 培訓</h1>
<p> </p>
<div id="includedContent"/span>> </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"/span> md-complete="step1。 completed">
<md-content>/span>
< iframe id="iframe0"/span> name="myIframe0"/span> frameborder="5"/span> width="1500"/span> height="1500"/span>> </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>/span>
</md-step>/span>
<md-step label="Lab2" md-complete="step2。 completed" ng-disabled="step2.disabled">
<md-content>/span>
< iframe id="iframe1"/span> name="myIframe1"/span> frameborder="5"/span> width="1500"/span> height="1500"/span>> </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>/span>
</md-step>/span>
<md-step label="End" md-complete="Step3. completed" ng-disabled="step3.disabled">。
<md-content>/span>
<h1>
全部完成!
</h1> 全部完成!
<h5> </br> 您已完成此培訓路徑。</br>您可以回到實驗室或選擇其他培訓。
</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>/span>
</md-step>/span>
</md-steppers>/span>
</md-card>/span>
</div>/span>
因此，在這種情況下，帶有步進器的塊被加載，但沒有被顯示。只有一個白色的塊出現。如果我在瀏覽器中進行 "檢查元素 "操作，Stepper.html的內容實際上是存在的，只是沒有被顯示出來。這可能是什么問題？
在index.html中使用div ng-include = "views / stepper.html"，步進器就會出現，但我需要一個javascript函式，只有當你點擊圖形的一個節點時才會呼叫。
在圖片中，你可以看到底部的白色方框出現。
uj5u.com熱心網友回復：
這是你的解決方案...
首先：
只要把你想在點擊時添加的資料保留在你的
中<div id="includedContent">/span>
<!--這里是你的資料，在點擊時添加-->
</div>/span>
第二步： 只需添加它的css屬性display: none
#includedContent {
display: none;
注意：不要使用行內css方法來設定屬性display : none
。第三： 使用java腳本設定onclick函式
onclick="document.getElementById('includedContent').style.display='block'"
這段代碼在點擊你的h1標簽 "Tranning "時起作用，你可以把它放在任何地方。 這就是它。 要想獲得更多的資訊，請看下面的代碼片段。 我只用了基本的html，css，js，所以你的圖表是不可見的，但你可以看到，添加的文本部分也是可見的。
希望你能明白這個道理。祝你有個愉快的一天。
。#includedContent {
display: none;
}<html>/span>
<head>
<title>培訓</title> /span>
<meta name="description">/span>
<meta charset="utf-8">/span>
<link rel="styleheet" href="assets/architecturetree/css/tree. css" />
< link rel="styleheet" href="path/to/font-awesome/css/font-awesome. min.css">
<link rel="styleheet" href="style。 css">
</head>
<body>
<div id="graph">
<!--查看圖形-->
<h1 onclick="document.getElementById('includedContent') .style. display='block'"><i class="fafa-book"> </i> 培訓</h1>
<p> </p>
<div id="includedContent">/span>
<div class="step">
</br>/span>
</br>/span>
</br>/span>
<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"/span> md-complete="step1。 completed">
<md-content>/span>
< iframe id="iframe0"/span> name="myIframe0"/span> frameborder="5"/span> width="1500"/span> height="1500"/span>> </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>/span>
</md-step>/span>
<md-step label="Lab2" md-complete="step2。 completed" ng-disabled="step2.disabled">
<md-content>/span>
< iframe id="iframe1"/span> name="myIframe1"/span> frameborder="5"/span> width="1500"/span> height="1500"/span>> </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>/span>
</md-step>/span>
<md-step label="End" md-complete="Step3. completed" ng-disabled="step3.disabled">。
<md-content>/span>
<h1>
全部完成!
</h1> 全部完成!
<h5>/span>
</br> 你已經完成了這個培訓路徑。</br>你可以回到實驗室或選擇其他培訓。
</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>/span>
</md-step>/span>
</md-steppers>/span>
</md-card>/span>
</div>/span>
</div>/span>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/320665.html
標籤：
下一篇：紗線構建消耗100%的CPU