【发布时间】：2020-12-03 23:00:10
【问题描述】：
我正在尝试在不使用 jQuery 选项卡 UI 的情况下使用 jQuery 设置选项卡导航。据我了解，当用户单击列表元素时，代码
- 使用
data-tab="X"获取列表元素并添加current类，该类将为该链接设置opacity: 1（默认值：50%）， - 然后从选项卡内容部分中删除
current类，并显示具有相同data-tab属性的相应div。
我尝试通过单击按钮来复制相同的过程。这似乎有效，因为它从.tab-link 类中删除了当前类，但没有将当前类添加到相应的ul.tabs li 元素中。
这会产生令人困惑的用户体验，因为当用户按下下一个/上一个按钮时，不清楚哪个部分/选项卡处于活动状态/当前状态。
当我点击下一个和上一个按钮时，如何将当前类添加到对应的ul.tabs li？这是 jQuery 问题还是 CSS 问题？
$(document).ready(function () {
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('button.next-previous').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
$('li').find('ul:first').addClass('moveme');
$('html, body').animate({
scrollTop: $("#tabsNav").offset().top
}, 2000);
});
});:root {
--darkgreen: #203631;
--background: #f5f5f5;
--pinkaccent: #f49393;
--white: #fff;
--black: #000;
}
.formButton {
display: inline-block;
border-radius: 4px;
background-color: var(--pinkaccent);
border: none;
color: #ffffff;
text-align: center;
font: italic 600 18px var(--secondfont);
padding: 1rem 2rem;
margin-top: 10px;
cursor: pointer;
}
.checkoutNumbers {
width: 30px;
height: 30px;
}
/*--------------------------------------------------------------
# My Account - Tabs
--------------------------------------------------------------*/
/*/Links/buttons container /*/
ul.tabs {
display: block;
margin: 0 auto;
text-align: center;
padding: 0px;
list-style: none;
}
/*/Login & Register Links/*/
ul.tabs li {
background: none;
text-align: center;
color: var(--darkgreen);
font-family: var(--mainfont);
display: inline-block;
padding: 10px 15px;
margin: 0 auto;
font-size: 2rem;
opacity: 50%;
cursor: pointer;
}
/*/Current and selected link/*/
ul.tabs li.current {
opacity: 1;
}
/*/Content Class/*/
.tab-content {
display: none;
padding: 15px;
animation: fadeEffect 1.5s;
}
/*/Current Content Class/*/
.tab-content.current {
display: inherit;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="tabsNav">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1" data-tab="">
<span>Billing</span>
</li>
<li class="tab-link" data-tab="tab-2">
<span>Delivery<span>
</li>
<li class=" tab-link" data-tab="tab-3">
<span>Review & Payment</span>
</li>
</ul>
</div>
<!--Tabs Content-->
<div id="tab-1" class="tab-content current">
<p>Billing tab.</p>
<button data-tab="tab-2" class="next-previous formButton checkout">Continue</button>
</div>
<div id="tab-2" class="tab-content">
<p>Delivery Tab</p>
<button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button>
<button data-tab="tab-1" class="next-previous formButton checkout">Back</button>
</div>
<div id="tab-3" class="tab-content">
<p>Payment tab.</p>
</div>【问题讨论】：
标签： javascript html jquery css tabs