如何通过点击纸张标签来更改页面内容？

【问题标题】：How to change page content by click over paper-tab?如何通过点击纸张标签来更改页面内容？
【发布时间】：2017-06-16 06:18:32
【问题描述】：

我有这样的纸标签

<paper-dialog id="view">  
  <paper-tabs selected="0">
    <paper-tab on-tap="_changeList">TAB 1</paper-tab>
    <paper-tab on-tap="_changeList">TAB 2</paper-tab>
    <paper-tab on-tap="_changeList">TAB 3</paper-tab>
  </paper-tabs>
  <iron-list>some story for tab 1</iron-list>
  <iron-list>some story for tab 2</iron-list>
  <iron-list>some story for tab 3</iron-list>
 </paper-dialog>

每个标签都有不同的熨斗列表。将选择第一个选项卡，但由于用户将单击其他选项卡，因此应更改所选选项卡的内容。 _changeList 函数会带来不同的数据。我该如何实现呢？请

【问题讨论】：

标签： javascript jquery tabs polymer google-web-component

【解决方案1】：

通过将paper-tabs 的selected 属性与iron-pages 的selected 属性绑定，将显示基于所选标签的对应关系。

<paper-dialog id="view">
   <paper-tabs selected="{{currentPage}}">
      <paper-tab on-tap="_changeList">TAB 1</paper-tab>
      <paper-tab on-tap="_changeList">TAB 2</paper-tab>
      <paper-tab on-tap="_changeList">TAB 3</paper-tab>
   </paper-tabs>
   <iron-pages selected="{{currentPage}}">
      <iron-list>some story for tab 1</iron-list>
      <iron-list>some story for tab 2</iron-list>
      <iron-list>some story for tab 3</iron-list>
   </iron-pages>
</paper-dialog>

由于要默认显示第一个标签，需要将currentPage的值设置为0

ready: function(){
    this.currentPage = 0;
}

希望这会有所帮助:)

【讨论】：