Question

这有点棘手，所以我希望我能清楚地解释一下：

我有一个词汇表脚本，可以动态地将xml加载到容器中。元素在页面上从xml生成，带有set ids。我的客户希望在页面上创建一个选项卡式结构，其中每个选项卡内容都包含其中一个词汇表。有没有办法安全地执行此操作，可能是通过从DOM中删除选项卡内容字段并在单击新选项卡时将其切换为结构相同的？也在考虑iframe，但这看起来很糟糕......有没有更好的方法，我将如何扩展“init”功能来使用它？到目前为止，这是HTML正文的内容：

<script src="{{root}}assets/js/glossary.js"></script>

<section id="content" class="large-collapse">

    <ul class="tabs" data-tabs id="taxonomies">
        <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Cleanser</a></li>
        <li class="tabs-title"><a href="#panel2">Toner</a></li>
    </ul>

    <div class="tabs-content" data-tabs-content="taxonomies">

        <div class="tabs-panel is-active" id="panel1">

            <!-- dynamic container -->
            <div id="glossary-container"></div>

        </div>

        <div class="tabs-" id="panel2">

            <!-- dynamic container -->
            <div id="glossary-container"></div>

        </div>
    </div>
</section>

    <script>
    var glossary;

    function init() {

    //create the screen object which loads the xml and creates all screen elements
    glossary = new Screen({
    id: "ingredientsGlossary",
    xmlPath: "{{root}}assets/xml/cleanser.xml"
    });

    //choose a target div
    var targetDiv = get("glossary-container");

    //load it
        glossary.load(targetDiv, false);
    }
    //kick off
    window.onload = function() {
        init();
    };
    </script>

感谢您对初学者的任何见解。

使用相同的ID交换动态元素

0 个答案: