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

时间:2017-06-16 06:18:32

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

我有像这样的纸质标签

<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函数将带来不同的数据。我怎样才能实现这一点?请

1 个答案:

答案 0 :(得分:1)

通过将paper-tabs的{​​{1}}属性与selected的{​​{1}}属性绑定,将根据所选标签显示相应的结果。

iron-pages

如果您想通过defalut显示第一个标签,则需要将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

希望这会有所帮助:)