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

【问题标题】：When tab is selected, show next tab.. if last tab selected, show first tab (polymer paper-tabs + scroll spy)选择选项卡时，显示下一个选项卡。如果选择了最后一个选项卡，则显示第一个选项卡（聚合物纸选项卡 + 滚动间谍）
【发布时间】：2016-07-16 00:52:16
【问题描述】：

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

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

我的目标：

✔ 如果选择“页眉选项卡 1”，则显示“页脚选项卡 2”
✔ 如果选择“页眉选项卡 2”，则显示“页脚选项卡 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

（我在 jsfiddle 中使用了 polygit，我有一些奇怪的跳跃继续那个例子..因此我提供了第一个演示链接）。

默认情况下，页脚选项卡为“灰色”。我正在使用 CSS 伪选择器将“选定”页脚选项卡变为黑色......但我做不到了。选择“标题选项卡4”时，它不会显示“页脚选项卡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>

【问题讨论】：

标签： javascript css css-selectors polymer polymer-1.0

【解决方案1】：

~ 通用同级选择器无法按照您尝试使用的方式工作。它的语法 A ~ B 要求 B 在 DOM 树中在 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/

在那里，我只为一个新的“x-focused”类制定了一个 css 规则，而不是所有那些页脚 (...) 纸制标签 (...) 规则，我在scrollSelected 属性将该类添加到正确的元素并从前一个元素中删除。

【讨论】：