CSS：从左到右添加带有动画的边框|右到左 [英] CSS: Add border with animation left to right | right to left
问题描述
我当前正在尝试构建一个选项卡式div容器：
I'm currently trying to build a tabbed div container:
目前看起来像这样。我也可以切换标签。每个选项卡都有一个处于活动状态类。
At the moment it looks like this. I can also switch the tab. Each tab has an is-active class.
要向用户显示哪个选项卡处于活动状态，我添加了每个标签下的边框。现在，我更改标签时，边框几乎不变。
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?
这是我的简化代码：
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>
推荐答案
是的，您可以使用一个额外的标签。暂时将其称为滑块。
Yes,you can do it using an extra tag. Call it as a slider for now.
因此，现在，如果您单击滑块将来回移动。
So, now if you click on the slider will move to and fro.
此处已附加代码。
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.
这篇关于CSS：从左到右添加带有动画的边框|右到左的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
