TagCanvas没有出现在我的第二个div中

Question

我有两个divs ，一个是主页，另一个是显示的其他页面，并且隐藏了主页。 我的问题是，当显示第二个div时，标签canvas没有出现。

    <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时，将显示“团队”页面（是第二个div），并且隐藏了主页，但是标签画布不会像主页一样出现。

Answer 1

在这里，我想如果您正在使用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（...时，我发现试图重新创建该bug的问题覆盖了第一个错误，我也不得不将锚标签放置在标签列表中，这样它才能起作用。 在这里您可以看到它在行动