我目前正在尝试构建一个选项卡式的div容器:
目前看起来是这样的。我也可以切换标签。每个标签都有一个is-active
类。为了向用户显示哪个标签是活动的,我在每个标签下添加了一个边框。当我现在改变标签时,边框几乎没有改变。所以从左边一个移除,添加到右边一个。
因为这看起来不太漂亮,我想“是否可能通过动画从左到右或从左到右返回时,在按下选项卡标题时添加边框?”所以它应该看起来像从一个选项卡到另一个选项卡的淡入淡出。有什么想法如何处理这个问题?
这是我的简化代码:
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>