选择选项卡时，显示下一个选项卡。如果选择最后一个选项卡，则显示第一个选项卡（聚合物纸选项卡+滚动间谍）

Question

我正在使用 2 套聚合物纸标签 + iron-scroll-spy 自定义元素。

Paper Tabs 使用 "iron-selector" 元素以保持其状态。单击选项卡时，Iron Scroll Spy 将动画滚动到页面的各个部分，并在滚动时更新纸张选项卡状态。现在我想在底部添加一个 "paper fab" 按钮，允许用户 "jump" 到下一部分。

我的目标：

✔ 如果选择 "header tab 1"，则显示 "footer tab 2"
✔ 如果选择 "header tab 2"，则显示 "footer tab 3"
✔ 如果选择 "header tab 3"，则显示 "footer tab 4"
✖ 如果选择 "header tab 4"，则显示 "footer tab 1"

快拥有了！...

演示： http://oneezy.com/demo/scroll-spy/index.html
jsfiddle: https://jsfiddle.net/oneeezy/c3ertupe

(I'm using polygit in jsfiddle, and I there is some weird jumpiness going on with that example..hence why I provided the first demo link).

默认情况下，页脚标签为 "gray"。我正在使用 CSS 伪选择器将 "selected" 页脚选项卡变为黑色...但我做不到。选择 "header tab 4" 时，它不会显示 "footer tab 1"。这是拼图的最后一块。如果可能的话，我想使用 CSS 或声明性地使用 javascript。

实现此功能的最佳方法是什么？

代码：

    <base href="https://polygit.org/iron-scroll-spy+zecat+v1.0/components/">
    
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="iron-scroll-spy/iron-scroll-spy.html">
    <link rel="import" href="iron-scroll-spy/iron-scroll-spy-behavior.html">
    <link rel="import" href="app-layout/app-header/app-header.html">
    <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="app-layout/app-scroll-effects/app-scroll-effects.html">
    <link rel="import" href="paper-tabs/paper-tabs.html">
    <link rel="import" href="paper-tabs/paper-tab.html">
    <link rel="import" href="paper-fab/paper-fab.html">
    <link rel="import" href="iron-icons/hardware-icons.html">
    
    <!-- DOM Module
    ---------------------------------------->
    <dom-module id="scroll-spy-app">
    <template>
        <style>
            :host {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
                flex-direction: column;
                position: relative;
                height: 100%;
                padding-top: 150px;
            }
    
            /* Flex Classes */
            .flex-horizontal { display: -ms-flexbox; -ms-flex-direction: row; display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; }
            .flex-vertical   { display: -ms-flexbox; -ms-flex-direction: column; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; }
    
    
    
            /* HEADER TABS (normal order)
            ***************************************************************************************************************************************************************************/
            app-header { background: #009688; position: fixed; top: 0; left: 0; width: 100%; height: 128px; }
            app-header app-toolbar { background: #009688; }
            app-header app-toolbar.toolbar-top { position: relative; z-index: 1; }
            app-header app-toolbar.toolbar-bottom { position: relative; z-index: 2; }
    
    
    
            /* FOOTER TABS (Custom Order)
            ***************************************************************************************************************************************************************************/
            footer { position: fixed; bottom: 0; right: 0; width: 100%; z-index: 100; background: #ccc; }
            footer paper-tabs { position: relative; height: 70px; }
            footer paper-tabs paper-tab paper-fab { background: black; }
    
            /* Inactive */
            footer paper-tabs paper-tab                     { opacity: .25; }
            footer paper-tabs paper-tab:nth-of-type(1)      {  }        /* order: 4; */
            footer paper-tabs paper-tab:nth-of-type(2)      {  }        /* order: 1; */
            footer paper-tabs paper-tab:nth-of-type(3)      {  }        /* order: 2; */
            footer paper-tabs paper-tab:nth-of-type(4)      {  }        /* order: 3; */
    
            /* Selected */
            footer paper-tabs paper-tab.iron-selected {  }
    
            footer paper-tabs paper-tab.iron-selected:nth-of-type(1)      ~     paper-tab:nth-of-type(2)      { opacity: 1; display: block; }
            footer paper-tabs paper-tab.iron-selected:nth-of-type(2)      ~     paper-tab:nth-of-type(3)      { opacity: 1; display: block; }
            footer paper-tabs paper-tab.iron-selected:nth-of-type(3)      ~     paper-tab:nth-of-type(4)      { opacity: 1; display: block; }
            footer paper-tabs paper-tab.iron-selected:nth-of-type(4)      ~     paper-tab:nth-of-type(1)      { opacity: 1; display: block; }
    
    
    
            /* MAIN CONTENT (Scroll Spy)
            ***************************************************************************************************************************************************************************/
            section                          { min-height: 100vh; }
            section iron-scroll-spy          {  }
            section iron-scroll-spy div      { min-height: 100vh; padding: 250px 100px; border-bottom: 1px solid grey; }
    
        </style>
    
    
    
            <app-header condenses reveals fixed effects="waterfall">
                <app-toolbar class="toolbar-top">Iron Scroll Spy</app-toolbar>
    
                <app-toolbar class="toolbar-bottom" sticky>
                    <paper-tabs selected="{{scrollSelected}}">
                        <paper-tab>Tab 1</paper-tab>
                        <paper-tab>Tab 2</paper-tab>
                        <paper-tab>Tab 3</paper-tab>
                        <paper-tab>Tab 4</paper-tab>
                    </paper-tabs>
                </app-toolbar>
            </app-header>
    
            <section id="scrollTarget">
                <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
                  <div>
                    <h1>Section 1</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                  <div>
                    <h1>Section 2</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                  <div>
                    <h1>Section 3</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                  <div>
                    <h1>Section 4</h1>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
                  </div>
                </iron-scroll-spy>
            </section>
    
            <footer>
                <paper-tabs selected="{{scrollSelected}}" align-bottom="true">
                    <paper-tab tab="hidden">
                        Tab 1
                        <paper-fab icon="hardware:keyboard-arrow-up"></paper-fab>
                    </paper-tab>
    
                    <paper-tab tab="active">
                        Tab 2
                        <paper-fab icon="hardware:keyboard-arrow-down"></paper-fab>
                    </paper-tab>
    
                    <paper-tab tab="hidden">
                        Tab 3
                        <paper-fab icon="hardware:keyboard-arrow-down"></paper-fab>
                    </paper-tab>
    
                    <paper-tab tab="hidden">
                        Tab 4
                        <paper-fab icon="hardware:keyboard-arrow-down"></paper-fab>
                    </paper-tab>
                </paper-tabs>
            </footer>
    
    </template>
    
    <script>
      Polymer({
        is: 'scroll-spy-app',
    
        ready: function() {
          this.$.scrollSpy.scrollTarget;
        }
      });
    </script>
    
    </dom-module>
    
    
    
    
    <!-- Custom Element 
    ---------------------------------------->
    <scroll-spy-app></scroll-spy-app>

Answer 1

~ 通用同级选择器不会按照您尝试使用的方式工作。它的语法 A ~ B 要求 B 在 DOM 树中 after A。

这里有一个想法可以用来实现你想要的：将 scrollSelected 的值放入某个标签的属性中，例如 footer:

<footer selected$="[[scrollSelected]]">

然后使用[attribute="value"]选择器：

    footer[selected="0"] paper-tab:nth-of-type(2) { opacity: 1; display: block; }
    footer[selected="1"] paper-tab:nth-of-type(3) { opacity: 1; display: block; }
    footer[selected="2"] paper-tab:nth-of-type(4) { opacity: 1; display: block; }
    footer[selected="3"] paper-tab:nth-of-type(1) { opacity: 1; display: block; }

我已经用上述更改更新了你的 jsfiddle，检查一下： https://jsfiddle.net/ncn99dpa/

编辑

经过深思熟虑 - 您可能希望在每次添加新的纸张选项卡时都编写不需要在 CSS 中使用新选择器的代码。在那种情况下，试试这个 jsfiddle：https://jsfiddle.net/uwjdz7fg/

在那里，我只制定了一个 css 规则，用于新的 class "x-focused" 而不是所有那些页脚 (...) 纸标签 (... ) 规则，我在 scrollSelected 属性上使用观察者将 class 添加到适当的元素并从前一个元素中删除。

选择选项卡时，显示下一个选项卡。如果选择最后一个选项卡，则显示第一个选项卡（聚合物纸选项卡+滚动间谍）

When tab is selected, show next tab.. if last tab selected, show first tab (polymer paper-tabs + scroll spy)

javascript

css

css-selectors

polymer

polymer-1.0