gpt4 book ai didi

javascript - 使用 Polymer 将纸标签绑定(bind)到核心页面

转载 作者:可可西里 更新时间:2023-11-01 01:36:42 26 4
gpt4 key购买 nike

我正在使用 Polymer 构建一个使用纸质标签和核心页面的网站。我遇到的问题是,我似乎无法获得选项卡的点击事件来影响正在显示的页面,并且所有内容都保持隐藏状态,除非我专门选择要显示的页面。
所以我真的只希望选项卡按照选项卡应有的方式运行。

到目前为止,这是我的代码:

<body unresolved>

<paper-tabs selected="0" selectedindex="0" id="paper-tabs" >

<paper-tab id="paper-tab" active>ABOUT</paper-tab>
<paper-tab id="paper-tab1">PORTFOLIO</paper-tab>
<paper-tab id="paper-tab2">CONTACT</paper-tab>

</paper-tabs>



<core-pages selected="{{$.paper-tab.selected}} " selectedindex="0" notap id="core-pages">
<about-me id="paper-tab" active>
<h2 horizontal center-justified>Worldwide Jamie</h2>
<p>Jamie is a Chicago-based freelance front end web developer.</p>
<p>Clearly this website is <b>Under Development</b></p>
<p>Come back soon to see how great your site could be</p>
</about-me>

<portfolio-list id="portfolio">
<!--Insert slider?-->
</portfolio-list>

<contact-me id="contact">
</contact-me>
</core-pages>

</body>
</html>

提前感谢您的时间和考虑。

最佳答案

从 Polymer 1.0+ 开始,这就是您想要使用的。

<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/iron-pages/iron-pages.html">

<paper-tabs selected="0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>

<iron-pages selected="0">
<div>Page One</div>
<div>Page Two</div>
</iron-pages>

<script>
var pages = document.querySelector('iron-pages');
var tabs = document.querySelector('paper-tabs');

tabs.addEventListener('iron-select', function() {
pages.selected = tabs.selected;
});
</script>

关于javascript - 使用 Polymer 将纸标签绑定(bind)到核心页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24688986/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com