CSS：从左到右添加带有动画的边框| 右到左
[英]CSS: Add border with animation left to right | right to left
问题描述
I'm currently trying to build a tabbed div container: 
我目前正在尝试构建一个选项卡式div容器：
At the moment it looks like this. 目前看起来像这样。 I can also switch the tab. 我也可以切换标签。 Each tab has an is-active class. 每个选项卡都有一个is-active类。
To show the user which tab is active, I've added a border under each tab. 为了向用户显示哪个选项卡处于活动状态，我在每个选项卡下添加了一个边框。 When I change tab now, the border get's hardly changed. 现在更改标签时，边框几乎不变。 So removed from the left one and added to the right one. 因此从左侧的一个删除，然后添加到右侧的一个。
Because this looks not so pretty I thought "Is it possible to add the border with an animation sliding from the left to the right or back to the left when pressing the tab title?" 因为看起来不太漂亮，所以我想：“按下选项卡标题时，是否可以添加从左向右滑动或从左向左滑动的动画添加边框？”
So it should looks like fading from tab to the other one. 因此，它应该看起来像从选项卡移到另一个。 Any idea how to deal with this? 知道如何处理吗？
This is my simplified code: 这是我的简化代码：
jQuery("ul.tabs li").click(function(){ var e = jQuery(this).attr("aria-controls"); jQuery(this).hasClass("active")||(jQuery("li").removeClass("active"),jQuery(this).addClass("active"),jQuery("#"+e).show())})
ul.tabs { margin: 0!important; padding: 0!important; background: #f4f4f4; display: flex; } ul.tabs li { flex-grow: 50; list-style: none; text-align: center; background: #fff; line-height: 45px; cursor: pointer; } ul.tabs li a { color: black; text-decoration: none; } ul.tabs li.active { cursor: default; border-bottom: 2px solid red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="tabs wc-tabs" role="tablist"> <li class="description_tab active" id="tab-title-description" role="tab" aria-controls="tab-description"> <a href="#tab-description">Beschreibung</a> </li> <li class="reviews_tab" id="tab-title-reviews" role="tab" aria-controls="tab-reviews"> <a href="#tab-reviews">Fragen / Antworten</a> </li> </ul>
1 个解决方案
解决方案1
2 已采纳 2019-02-21 17:06:30
Yes,you can do it using an extra tag. 是的，您可以使用一个额外的标签。 Call it as a slider for now. 现在将其称为slider 。
So, now if you click on the slider will move to and fro. 因此，现在如果您单击滑块将来回移动。
Here is code attached. 这是附加的代码。
var tabs = document.getElementsByClassName('Tab'); Array.prototype.forEach.call(tabs, function(tab) { tab.addEventListener('click', setActiveClass); }); function setActiveClass(evt) { Array.prototype.forEach.call(tabs, function(tab) { tab.classList.remove('active'); }); evt.currentTarget.classList.add('active'); }
.Tabs { position: relative; background-color: #fff; margin: 0; padding: 0; list-style: none; } .Tabs:after { content: ' '; display: table; clear: both; } .description_tab { float: left; width: 33.333%; text-align: center; } .description_tab:first-child.active ~ .slider { left: 0; } .description_tab:nth-child(2).active ~ .slider { left: 33.333%; } .slider { position: absolute; bottom: 0; left: 0; width: 33.333%; height: 4px; background-color: #4A66F4; transition: left .25s; } .Tab { font-family: 'Roboto Slab'; } .Tab > a { display: block; padding: 10px 12px; text-decoration: none; color: #666; transition: color .15s; } .Tab.active > a { color: #222; } .Tab:hover > a { color: #222; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <ul class="Tabs" role="tablist"> <li class="description_tab active Tab" id="tab-title-description" role="tab" aria-controls="tab-description"> <a href="#tab-description">Beschreibung</a> </li> <li class="description_tab Tab" id="tab-title-reviews" role="tab" aria-controls="tab-reviews"> <a href="#tab-reviews">Fragen / Antworten</a> </li> <li class="slider" role="presentation"></li></ul> </body> </html>
Hope this helped you, Thank you. 希望这对您有所帮助，谢谢。
Credits: from earth on codepen 积分： 来自Codepen上的地球
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.