Бумажные выступы с отображением ссылок

Question

Я пишу одностраничный веб-сайт с использованием page.js, как и в наборе с полимерным стартером. Вместо использования бумажного меню для маршрутизации я использую бумажные вкладки.

Итак, маршрутизация работает и все, но я не могу заставить бумажные вкладки больше выглядеть как бумажные вкладки. Они просто выглядят как ссылки, и я не вижу панель выбора внизу.

Любая идея, что я делаю неправильно?

index.html

<!-- Main Toolbar --> 
    <paper-toolbar id="mainToolbar" class="medium-tall"> 
     <!-- Application name --> 
     <div class="app-name">Website</div> 

     <span class="space"></span> 

     <!-- Toolbar icons --> 
     <paper-icon-button icon="refresh"></paper-icon-button> 
     <paper-icon-button icon="search"></paper-icon-button> 

     <!-- Application tabs --> 
     <paper-tabs class="bottom" attr-for-selected="data-route" selected="[[route]]"> 
     <paper-tab link> 
      <a data-route="home" href="{{baseUrl}}"> 
      <iron-icon icon="home"></iron-icon> 
      <span>Home</span> 
      </a> 
     </paper-tab> 
     <paper-tab link> 
      <a data-route="artist" href="{{baseUrl}}artist"> 
      <iron-icon icon="home"></iron-icon> 
      <span>Artist</span> 
      </a> 
     </paper-tab> 
     <paper-tab link> 
      <a data-route="teacher" href="{{baseUrl}}teacher"> 
      <iron-icon icon="home"></iron-icon> 
      <span>Teacher</span> 
      </a> 
     </paper-tab> 
     <paper-tab link> 
      <a data-route="research" href="{{baseUrl}}research"> 
      <iron-icon icon="home"></iron-icon> 
      <span>Research</span> 
      </a> 
     </paper-tab> 
     <paper-tab link> 
      <a data-route="contact" href="{{baseUrl}}contact"> 
      <iron-icon icon="mail"></iron-icon> 
      <span>Contact</span> 
      </a> 
     </paper-tab> 
     </paper-tabs> 
    </paper-toolbar> 

    <!-- Main Content --> 
    <div class="content"> 
     <iron-pages attr-for-selected="data-route" selected="{{route}}"> 
     <section data-route="home"> 
      <paper-material elevation="1"> 
      <my-greeting></my-greeting> 

      <p class="subhead">You now have:</p> 
      <my-list></my-list> 

      <p>Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p> 
      </paper-material> 
     </section> 

     <section data-route="artist"> 
      <paper-material elevation="1"> 
      <h2 class="page-title">Users</h2> 
      <p>This is the users section</p> 
      <a href$="{{baseUrl}}users/Addy">Addy</a><br> 
      <a href$="{{baseUrl}}users/Rob">Rob</a><br> 
      <a href$="{{baseUrl}}users/Chuck">Chuck</a><br> 
      <a href$="{{baseUrl}}users/Sam">Sam</a> 
      </paper-material> 
     </section> 

     <section data-route="teacher"> 
      <paper-material elevation="1"> 
      <h2 class="page-title">User: {{params.name}}</h2> 
      <div>This is {{params.name}}'s section</div> 
      </paper-material> 
     </section> 

     <section data-route="contact"> 
      <paper-material elevation="1"> 
      <h2 class="page-title">Contact</h2> 
      <p>This is the contact section</p> 
      </paper-material> 
     </section> 
     </iron-pages> 
    </div> 

Answer 1

Я думаю, что я понял вашу проблему. Когда вы нажимаете на вкладки, они не сохраняют состояния щелчка и выбранной вкладки.

Этот ответ будет частично прояснить проблему Change URL in address bar after click on DOM element with javascript/jquery

В Polymer У меня такая же проблема, но с пунктами меню. Я думаю, что вы можете решить его таким образом:

1). Используйте app-router вместо page.js и добавьте режим pushstate к нему mode='pushstate'.

2). Включите pushstate-anchor на свою страницу, прежде чем включить приложение-маршрутизатор <link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">. Это позволит сохранить все ссылки и перезагрузить страницу не будет.