Polymer 聚合物：将纸标签绑定到核心支架内的核心页面
我这里有一个问题，我需要将Polymer 聚合物：将纸标签绑定到核心支架内的核心页面,polymer,paper-elements,core-elements,Polymer,Paper Elements,Core Elements,我这里有一个问题，我需要将纸张选项卡选择绑定到核心页面中核心支架的选择 我已经试过了，但不起作用： tabs.addEventListener('core-select',function() { pages.selected = tabs.selected; console.log("Selected: " + tabs.selected); }); 在控制台上返回错误： 找不到选项卡！index.html:147 未捕获的TypeError:无法读取null的属性“addEve
纸张选项卡核心页面核心支架的选择 tabs.addEventListener('core-select',function()
{
pages.selected = tabs.selected;
console.log("Selected: " + tabs.selected);
});
<!doctype html>
<html>
<head>
<title>Test Page</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/core-icons/core-icons.html">
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-menu/core-submenu.html">
<link rel="import" href="../components/core-pages/core-pages.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/core-collapse/core-collapse.html">
<link rel="import" href="../components/core-style/core-style.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 100%;
margin: 50px auto;
}
.heading {
padding: 10px 15px;
background-color: #f3f3f3;
border: 1px solid #dedede;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 18px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.content {
position: relative;
padding: 15px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height:100vh;
}
@media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#ctabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body unresolved>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-submenu icon="settings" label="Select Level">
<core-submenu icon="settings" label="1">
</core-submenu>
</core-submenu>
</core-menu>
</core-header-panel>
<span tool>Learning Portal V1.0</span>
<div class="content">
<core-toolbar>
<paper-tabs id="ctabs" self-end selected="0">
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages selected="1" id="cpages">
<div>
<paper-button raised style="width: 150px; height: 150px"/>
</div>
<div>
<core-menu>
<core-submenu label="I. Units & Measurement">
<span>Data goes here!</span>
</core-submenu>
</core-menu>
</div>
</core-pages>
</div>
</core-scaffold>
<script>
var tabs = document.querySelector('ctabs');
var pages = document.getElementById('cpages');
if(!tabs)
{
console.log("tab is not found!");
}
if(tabs)
{
console.log("tab is found!");
}
tabs.addEventListener('core-select',function(){
pages.selected = tabs.selected;
console.log("Selected: " + tabs.selected);
});
//function myFunction() {
// console.log("Selected: " + tabs.selected);
//}
</script>
</body>
</html>
测试页
html，正文{
身高：100%；
保证金：0；
背景色：#E5；
字体系列：“RobotoDraft”，无衬线；
}
.集装箱{
宽度：100%；
保证金：50px自动；
}
.标题{
填充：10px 15px；
背景色：#F3；
边框：1px实心#dedede；
边框左上半径：5px；
边框右上角半径：5px；
字号：18px；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-webkit点击高亮颜色：rgba（0,0,0,0）；
}
.内容{
位置：相对位置；
填充：15px；
边框：1px实心#dedede；
边界顶部：无；
边框左下半径：5px；
边框右下半径：5px；
高度：100vh；
}
@介质（最小宽度：481px）{
#标签{
宽度：200px；
}
.集装箱{
宽度：400px；
}
}
芯头面板{
身高：100%；
溢出：自动；
-webkit溢出滚动：触摸；
}
核心工具栏{
背景#03a9f4；
颜色：白色；
}
#CTAB{
宽度：100%；
保证金：0；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
文本转换：大写；
}
菜单
学习门户V1.0
全部的
最爱
数据在这里！
var tabs=document.querySelector（'ctab'）；
var pages=document.getElementById（'cpages'）；
如果（！制表符）
{
log（“找不到选项卡！”）；
}
如果（选项卡）
{
log（“找到选项卡！”）；
}
tabs.addEventListener（'core-select'，function（）{
pages.selected=tabs.selected；
console.log（“所选：”+选项卡。所选）；
});
//函数myFunction（）{
//console.log（“所选：”+选项卡。所选）；
//}
提前感谢您的帮助 这不是聚合物问题；您的选择器错误：
var tabs = document.querySelector('ctabs');
var tabs = document. getElementById('ctabs');
谢谢，我还有另一个问题，为什么这在聚合物元素中不起作用；var tabs=document.querySelector（“#ctab”）；但这是可行的；var tabs=此。$.ctab<如果试图访问元素的影子DOM中的内容，则code>document.querySelector不起作用，因为它不是主文档树，而是在影子DOM中。您可以使用
/deep/document.querySelector（'html/deep/#ctab'）；this.$querySelectorvar tabs = document.querySelector('#ctabs');