使用jquery实现tab切换

最新推荐文章于 2024-07-29 18:19:14 发布

HAI6545

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量3.5k

点赞数 1

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

本文链接：https://blog.csdn.net/HAI6545/article/details/122546583

版权

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

摘要由CSDN通过智能技术生成


<!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">

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用jquery实现tab切换

<!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;...
复制链接

扫一扫