选中选项卡后，显示下一个选项卡..如果选择了最后一个选项卡，则显示第一个选项卡（聚合物纸张标签+滚动间谍）

Question

我使用了2套聚合物纸标签+铁滚动间谍自定义元素。

纸张标签使用＆＃34;铁选择器＆＃34;元素，以便它可以保持它的状态。 单击选项卡时，Iron Scroll Spy将动画滚动到页面的各个部分，并在滚动时更新纸张选项卡状态。现在我想添加一个＆＃34;纸制品厂＆＃34;底部的按钮，允许用户跳过＆＃34;到下一部分。

我的目标：

✔如果＆＃34;标题标签1＆＃34;选中，显示＆＃34;页脚标签2＆＃34;
✔如果＆＃34;标题标签2＆＃34;选中，显示＆＃34;页脚标签3＆＃34;
✔如果＆＃34;标题标签3＆＃34;选中，显示＆＃34;页脚标签4＆＃34;
✖如果＆＃34;标题标签4＆＃34;选择，显示＆＃34;页脚选项卡1＆＃34;

几乎拥有它！...

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

  

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

默认情况下，页脚标签为＆＃34;灰色＆＃34;。我使用CSS伪选择器来打开＆＃34;选择＆＃34;页脚标签黑色...但我不足。当＆＃34;标题标签4＆＃34;被选中它没有显示＆＃34;页脚标签1＆＃34;。这是拼图的最后一块。我想尽可能使用CSS或以声明方式使用javascript。

最好的方法是什么？

代码：

＆＃13;

＆＃13;

3450 contains 34
34 contains 34
3534 contains 34
10003400 contains 34

＆＃13;

＆＃13;

＆＃13;

Answer 1

〜一般兄弟选择器将无法按照您尝试使用的方式工作。 它的语法A~B要求在DOM树中 A之后 。

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

S13:
            begin

                case (max_val(FF_v1, FF_v2, FF_v3))    /// HERE??

                    01:
                            begin
                                mem_out1 = 1;
                            end
                    10:
                            begin
                                mem_out2 = 1;
                            end
                    11:  
                            begin
                                mem_out3 = 1;
                            end
                    00:      
                            begin
                              ...       /// what to do here??
                             end     

                  endcase
             end

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

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

我已使用上述更改更新了您的jsfiddle，请查看： https://jsfiddle.net/ncn99dpa/

修改

经过一番思考后 - 每次添加新的纸质标签页时，您可能都希望编写不需要CSS中新选择器的代码。在这种情况下，试试这个jsfiddle：https://jsfiddle.net/uwjdz7fg/

在那里，我只做了一个css规则，对于一个新的类“x-focused”而不是所有那些页脚（...）纸张标签（...）规则，我使用了一个观察者scrollSelected属性将该类添加到正确的元素并从前一个元素中删除。