javascript - 选择选项卡时，显示下一个选项卡。如果选择最后一个选项卡，则显示第一个选项卡( polymer 纸选项卡+滚动 spy )

Question

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

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

---

我的目标:

✔ 如果选择了“页眉标签 1”，则显示“页脚标签 2”
✔ 如果选择了“页眉标签 2”，则显示“页脚标签 3”
✔ 如果选择了“页眉标签 3”，则显示“页脚标签 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).

默认情况下，页脚标签为“灰色”。我正在使用 CSS 伪选择器将“选定的”页脚选项卡变成黑色……但我做不到。选择“页眉标签 4”时，它不会显示“页脚标签 1”。这是拼图的最后一 block 。如果可能的话，我想使用 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 树中在 A 之后。

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

<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 规则，而不是所有那些页脚 (...) paper-tab (...) 规则，我在scrollSelected 属性将该类添加到适当的元素并从前一个元素中删除。