使用jquery实现tab切换

最新推荐文章于 2025-03-11 18:12:26 发布

HAI6545

最新推荐文章于 2025-03-11 18:12:26 发布

阅读量3.6k

点赞数 1

分类专栏： JavaScript案例文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122546583

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

本文详细介绍了如何利用jQuery库创建动态的Tab切换效果。通过选择器选取元素，结合事件监听和DOM操作，轻松实现内容面板的显示与隐藏，让前端界面交互更加友好。适合初级到中级前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.tab{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin: 50px auto;
}
.tab ul, .tab ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.tab ul{
    height: 50px;
    background-color: #eee;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.tab ul li{
    width: 100px;
    height: 30px;
    background-color: #abcdef;
    text-align: center;
    line-height: 30px;
}
.tab ul li.active{
    background-color: #f00;
    color: #fff;
}
.tab ol{
    width: 600px;
    height: 250px;
}
.tab ol li a img{
    width: 600px;
    height: 250px;
}
.tab ol li{
    display:none;
}
.tab ol li.active{
    display:block;
}
.tab{
    cursor: pointer;
}
</style>
<body>
<div class="tab">
    <ul>
        <li class="active">向日葵</li>
        <li>郁金香</li>
        <li>红玫瑰</li>
    </ul>
    <ol>
        <li class="active">
            <a href="./images/1.jfif">
                <img src="./images/1.jfif" alt="">
            </a>
        </li>
        <li>
            <a href="./images/2.webp">
                <img src="./images/2.webp" alt="">
            </a>
        </li>
        <li>
            <a href="./images/3.jfif">
                <img src="./images/3.jfif" alt="">
            </a>
        </li>
    </ol>
</div>
</body>
<script src =" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<script>
// jquery做tab切换
// 获取所有ul下的li，利用隐式迭代直接绑定事件
$('.tab ul li').click(function(){
    // 给当前li添加类名active
    // var a = $(this).addClass('active') // 调用addClass后返回的是$(this)
    // console.log(a);

    // var b = $(this).addClass('active').siblings()
    // console.log(b);

    // var d = $(this).addClass('active').siblings().removeClass('active')
    // console.log(d);

    // var ul = $(this).addClass('active').siblings().removeClass('active').parent()
    // console.log(ul);

    // console.log( $(this).index() ); // 获取自己在集合中的下标

    // $('.tab ol li').eq($(this)的下标).addClass('active')
    // var c = $('.tab ol li').eq(  $(this).index()  ).addClass('active')
    // console.log(c);

    // $('.tab ol li').eq(  $(this).index()  ).addClass('active').siblings().removeClass('active')

    // $(this).addClass('active').siblings().removeClass('active').parent().next().children().eq(  $(this).index()  ).addClass('active').siblings().removeClass('active')

    $(this)
        .addClass('active') // 返回 $(this)
        .siblings() // 返回ul下li的兄弟
        .removeClass('active') // 返回ul下li的兄弟
        .parent() // 返回ul
        .next() // 返回ol
        .children() // 返回ol下所有li
        .eq(  $(this).index()  ) // 返回ol下的一个li
        .addClass('active') // 返回ol下的一个li
        .siblings() // 返回ol下li的兄弟
        .removeClass('active') // 返回ol下li的兄弟
})

// $('.tab ul li').click(() => $(this).addClass('active').siblings().removeClass('active').parent().next().children().eq(  $(this).index()  ).addClass('active').siblings().removeClass('active'))
</script>
</html>