早上好,我正试图创建一个材质设计滚动过渡效果(兄弟过渡)作为图像和下面的链接:
正文
我已经设法复制标签,但滚动效果不发生时,标签是改变,有人能帮助吗?非常感谢提前
'
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">One</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Two</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Three</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="content content--active">
<p>Content one</p></div>
<div class="content">
<p>Content two</p>
</div>
<div class="content">
<p>Content three</p>
</div>
'
'
.content {
display: none;
}
.content--active {
display: block;
}
'
代码编号:text
我已经设法复制了选项卡,但是当选项卡更改时不会出现滚动效果,
1条答案
按热度按时间6kkfgxo01#
相当简单但复杂。一个大容器,里面有所有的元素和一个flex列
中央支助系统
超文本标记语言
现在一切都准备好了javascript
任何处于活动模式的元素都应该在中间,所以我们要改变css中calc()函数的参数,也就是说,使用id和str.slice();方法在javascript中你可以将它切片并连接到int,这样你就可以使用下面的方法:
解决逻辑是正确的,但不要复制我的代码,不会工作,它是失踪了很多优化。如果你仍然需要进一步的更多帮助,我是可用的。