我有两个divs，一个是主页，另一个是显示的其他页面，主页被隐藏。我的问题是，当显示第二个div时，标签画布不会出现。
<script type="text/javascript">
setTimeout(function() { window.onload(); }, 700);
window.onload = function() {
try {
TagCanvas.Start('myCanvas','tags',{
textFont: 'Impact,"Arial Black",sans-serif',
textHeight: 25,
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05,
shape: "sphere",
dragControl: true,
txtOpt: true
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myCanvasContainer').style.display = 'none';
}
};
</script>
<script type="text/javascript">
setTimeout(function() { window.onload(); }, 700);
window.onload = function() {
try {
TagCanvas.Start('myCanvasSele','tagsSele',{
textFont: 'Impact,"Arial Black",sans-serif',
textHeight: 25,
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05,
shape: "sphere",
dragControl: true,
txtOpt: true
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myCanvasContainerSele').style.display = 'none';
}
};
</script>
...
<!---------- Home Page -------->
<div class="container" id="index">
<div class="starter-template">
<div class="col-md-8" style="height:500px">
<div id="myCanvasContainer">
<canvas width="690" height="450" id="myCanvas">
</canvas>
</div>
<div id="tags">
<ul id="tagList">
<li>Messi</li>
<li>Cristiano Ronaldo</li>
<li>Bale</li>
<li>Neymar</li>
</ul>
</div>
</div>
...
<!-------------- Page of Teams ---------->
<div class="container" id="selecoes">
<div class="starter-template">
<div class="col-md-8" style="height:500px">
<div id="myCanvasContainerSele">
<canvas width="690" height="450" id="myCanvasSele">
</canvas>
</div>
<div id="tagsSele">
<ul id="tagListSele">
<li>Portugal</li>
<li>Brazil</li>
<li>France</li>
<li>England</li>
</ul>
</div>
</div>
当我点击，例如，在Messi中，显示了Teams页面（是第二个div）并隐藏了主页，但标签画布不像主页那样出现。
答案 0 :(得分：0)
在这里，我想如果您使用tagcanvas.js，我想出了您想要实现的目标：
<script type="text/javascript">
// I created 2 functions that are called on the click of the links I added
showIndexPage = function() {
//When home is clicked we hide the teams page if it is not already done and show the home page, then execute the TagCanvas.Start
document.getElementById('teams').style.display = 'none';
document.getElementById('index').style.display = 'block';
try {
TagCanvas.Start('myCanvas','tags',{
textFont: 'Impact,"Arial Black",sans-serif',
textHeight: 25,
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05,
shape: "sphere",
dragControl: true,
txtOpt: true
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myCanvasContainer').style.display = 'none';
}
};
showTeamPage = function() {
//When teams is clicked we hide the home page if it is not already done and show the teams page, then execute the TagCanvas.Start
document.getElementById('index').style.display = 'none';
document.getElementById('teams').style.display = 'block';
try {
TagCanvas.Start('myCanvasTeams','tagsTeams',{
textFont: 'Impact,"Arial Black",sans-serif',
textHeight: 25,
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05,
shape: "sphere",
dragControl: true,
txtOpt: true
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myCanvasContainerTeams').style.display = 'none';
}
};
</script>
<a href="javascript:" onclick="showIndexPage()">Home</a>
<a href="javascript:" onclick="showTeamPage()">Teams</a>
<div class="container" id="index" style="display: none;">
<div class="starter-template">
<div class="col-md-8" style="height:500px">
<div id="myCanvasContainer">
<canvas width="690" height="450" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="#">Messi</a></li>
<li><a href="#">Cristiano Ronaldo</a></li>
<li><a href="#">Bale</a></li>
<li><a href="#">Neymar</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container" id="teams" style="display: none;">
<div class="starter-template">
<div class="col-md-8" style="height:500px">
<div id="myCanvasContainerTeams">
<canvas width="690" height="450" id="myCanvasTeams">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tagsTeams">
<ul>
<li><a href="#">Portugal</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">France</a></li>
<li><a href="#">England</a></li>
</ul>
</div>
</div>
</div>
</div>
我更改了团队页面中的html代码，因此它与索引中的html代码完全匹配，但更改了ID，因此它们都是唯一的。我发现尝试重新创建第二次调用TagCanvas.Start时出现的问题（...覆盖了第一个问题，我还必须将锚标记放在标记列表中以便它可以正常工作。{{3} }