Question

所以我用HTML和CSS整理了我的整个网站。然后我做了一些javascript，即处理一些标签切换。一切都很好。当我开始连接数据时，不是将整个网站放在聚合物元素中，而是在HTML的大部分内部放置一个自动绑定模板，然后只使用较小的元素。这些数据都运行良好，但现在 javascript停止了工作。

当你看到它看起来有点偏离时，我不太熟悉阴影dom是如何工作的，所以我不知道这是否正确，但在＃document-fragment中我看到了一个确切的结果我在＃document-fragment之后看到的所有内容的副本（即“top”，“middle”，“tabs”等）

enter image description here

以下是相关的javascript和完整的HTML：

$('.tab').on('click', function() {
    $('.tab').removeClass('selected');
    $('.content').hide();
    $(this).addClass('selected');
    var t = $(this).html();
    $('.' + t).show();
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/core-ajax/core-ajax.html">
    <link rel="import" href="elements/air-appName.html">
    <link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
    <div id="main">
        <template is="auto-binding">
            <core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
            <div id="top">
                <img id="imgLogo" src="images/app_AIR.png">
                <div id="itemHeader">
                    <img id="imgDataQuality" src="images/DataQuality0.png">
                    <air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
                </div>
            </div>
            <div id="middle">
                <div id="left">
                    <input id="txtSearch" type="text">
                    <img id="btnSearch" src="images/btnSearch.gif">
                    <air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
                </div>
                <div id="right">
                    <div id="tabContent">
                        <!--TODO: Tabs need to be more dynamic-->
                        <div id="tabs">
                            <span class="tab">General</span>
                            <span class="tab">Technical</span>
                            <span class="tab">Contacts</span>
                            <span class="tab">Links</span>
                            <span class="tab">Desktop</span>
                        </div>
                        <div class="content General">
                            This is the general tab
                        </div>
                        <div class="content Technical">
                            <table-servers serversUrl="{{app.associatedServers}}"></table-servers>
                        </div>
                        <div class="content Contacts">
                            This is the Contacts tab
                        </div>
                        <div class="content Links">
                            This is the links tab
                        </div>
                        <div class="content Desktop">
                            This is the desktop tab
                        </div>
                    </div>
                </div>
            </div>
            <div id="bottom">
                <div id="itemFooter">

                </div>
            </div>
        </template>
    </div>
    <script src="scripts/vendor/jquery-1.11.1.min.js"></script>
    <script src="scripts/vars.js"></script>
    <script src="scripts/functions.js"></script>
    <script src="scripts/main.js"></script>
    <script src="scripts/ready.js"></script>
</body>
</html>

添加了聚合物自动绑定模板，javascript停止工作

0 个答案: