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

标签 javascript polymer

我正在使用 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/

相关文章:

javascript - 如何禁用可排序动画 Jquery

javascript - React Router 重定向错误 404

javascript - 在 Shiny 中修改文字大小

javascript - HTML5 音频元素音频数据

html - 与其他方法相比,为什么 Polymer Project(Web Components)还没有出名?

javascript - 手动选择铁列表项目时出错

javascript - 如何在 ODOO v8 中对特定字段使用 JQ 或 JavaScript?

html - 在标准标签上工作时,无法将 polymer 数据绑定(bind)到自定义 html 标签上工作

polymer 铁列表显示不正确

Polymer 入门套件与 Polymer App Toolbox