jquery 选项卡带箭头滑动

jQuery选项卡带箭头滑动效果是网页制作中常用的一种效果，它可以给网页增加一定的交互性和美观性。下面介绍如何使用jQuery实现这种效果。

//HTML结构div class="tab">
    ul class="tab-nav">
    li>
    选项卡1/li>
    li>
    选项卡2/li>
    li>
    选项卡3/li>
    /ul>
    div class="tab-content">
    div>
    选项卡1内容/div>
    div>
    选项卡2内容/div>
    div>
    选项卡3内容/div>
    /div>
    div class="arrow">
    /div>
    /div>
//CSS样式.tab {
    position: relative;
}
.tab-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}
.tab-nav li {
    position: relative;
    list-style: none;
    cursor: pointer;
    margin-right: 30px;
}
.tab-nav li.active {
    color: #f00;
}
.tab-content {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: auto;
}
    .tab-content >
div {
    display: none;
}
    .tab-content >
div.active {
    display: block;
}
.arrow {
    position: absolute;
    top: 38px;
    z-index: 1;
    width: 10px;
    height: 10px;
    background: #000;
    transform: rotate(45deg);
    cursor: pointer;
}
//JS代码$(function() {
    //初始化第一个选项卡的样式$('.tab-nav li:first').addClass('active');
    $('.tab-content div:first').addClass('active').css('display', 'block');
    //获取选项卡导航和每个选项卡的宽度var tabNav = $('.tab-nav');
    var tabNavLi = $('.tab-nav li');
    var tabNavW = tabNav.width();
    var tabNavLiW = tabNavLi.width();
    //根据选项卡导航数量设置选项卡容器宽度var tabContentW = 100 * tabNavLi.length + '%';
    $('.tab-content').css('width', tabContentW);
    $('.tab-content >
    div').css('width', 100 / tabNavLi.length + '%');
    //初始化箭头位置$('.arrow').css('left', tabNavLiW / 2 - 5);
//选项卡导航点击事件$('.tab-nav li').click(function() {
    var index = $(this).index();
    //设置选项卡样式$(this).addClass('active').siblings().removeClass('active');
    //设置选项卡内容样式$('.tab-content >
    div').eq(index).addClass('active').siblings().removeClass('active');
    //移动箭头var arrowPos = tabNavLiW * index + tabNavLiW / 2 - 5;
$('.arrow').animate({
left: arrowPos}
    , 300);
}
    );
}
    );
    

通过上述代码，我们可以实现一个简单的jQuery选项卡带箭头滑动效果，让网页更加美观和互动。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！