2

我有两个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）并隐藏主页，但标签画布不像主页那样出现。

4

1 回答 1

0

Here, I think I figured out what you wanted to achieve assuming you are using 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>

I changed the html code from the team page so it matches the one from the index exactly, but changed the IDs so they are all unique. The problem that I found trying to recreate the bug what that the second time you were calling TagCanvas.Start(... overwritted the first one, also I had to put anchor tags in the tags list so it would work. Here you can see it in action

于 2014-05-28T15:16:20.540 回答