Question

我正在努力建立一个学习聚合物的网站。我正在使用核心抽屉面板和核心标题面板。现在，我希望在单击抽屉中的某个链接时更改内容。我在想，最好的办法是什么？是否有内置功能来切换页面？（不使用标签）

到目前为止，这是我的代码：

<body fullbleed vertical layout unresolved touch-action="auto">

<core-drawer-panel id="drawerPanel">

  <core-header-panel drawer id="drawer">
    <core-toolbar id="navheader">
    <span id="menutitle">Menu</span>
    </core-toolbar>
    <core-menu id='menu'>
      <paper-item class="menulink" id='homelink' label="Home"></paper-item>
      <paper-item class="menulink" id='gallerylink' label="Gallery"></paper-item>
      <paper-item class="menulink" id='calendarlink' label="Calendar"></paper-item>
      <paper-item class="menulink" id='contactlink' label="Contact"></paper-item>
    </core-menu>
  </core-header-panel>

  <core-header-panel main mode="seamed">
    <core-toolbar id="mainheader">
      <paper-icon-button 
      id="navicon" icon="menu"></paper-icon-button>
      <span flex id="title">My site</span>
    </core-toolbar>
    <div class="content">
      <div id="home" vertical layout centered>
        <big-picture flex></big-picture>
        <general-info flex></general-info>
        <footer-element flex></footer-element>
      </div>
      <div id='gallery' vertical layout centered>
      </div>
    </div>
  </core-header-panel>

</core-drawer-panel>

<script>
</script>
</body>

Answer 1

在我看来，聚合物文档页面对于新手来说很难解释，所以发送一个链接有点懒。

而不是使用div id来更改页面，请尝试这样：

<div class="content">
<core-animated-pages selected="0">
<section>
<div>Home page contents</div>
</section>
<section>
<div>Gallery contents</div>
</section>
</core-animated-pages>
</div>

点击下方添加一些javascript以更改页面

function home(){
//find <core-animated-pages> 
var c = document.querySelector('core-animated-pages');
//set the selected value to 0 (first <section>)
c.selected = 0;
}

function gallery(){
//find <core-animated-pages> 
var c = document.querySelector('core-animated-pages');
//set the selected value to 1 (second <section>)
c.selected = 1;
}

现在对于每个纸张项目按钮，添加一个onclick来调用每个功能来更改页面

<paper-item onclick="gallery();">Gallery</paper-item>

有更有效的方法可以更改页面，但这可以让您了解它的工作原理。别忘了导入你的元素！

聚合物切换页面

1 个答案: