JS 实现Tab标签页切换的效果
侧边栏壁纸
  • 累计撰写 35 篇文章
  • 累计收到 2 条评论

JS 实现Tab标签页切换的效果

逸曦穆泽
2021-01-25 / 0 评论 / 14 阅读 / 正在检测是否收录...

虽然好多框架都集成有现成Tab标签页切换的例子,但还是自己写一下吧!

效果图:

tab标签页

HTML显示
<!doctype html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>标题切换内容</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    <style>
        *{margin: 0;padding: 0;}
        li{ list-style: none;display: inline-block;}
        .container{width: 60%;margin:auto;}
        .tabs{display: flex;}
        .tab{ flex: 1;height:30px;line-height:30px;font-size:16px;font-family: "微软雅黑";text-align: center; cursor: pointer;}
        .content{width: 100%;height:200px;display: none;background-color: #d8d8d8;}
        .show{display: block;}
        .active{background-color: #bbb;color:#fff;}
    </style>
</head>
<body>
<div class="container">
    <ul class="tabs">
        <li class="tab active">java</li>
        <li class="tab">php</li>
        <li class="tab">html</li>
    </ul>
    <ul class="contents">
        <li class="content show">Java内容</li>
        <li class="content">PHP内容</li>
        <li class="content">HTML内容</li>
    </ul>
</div>
</body>
<script>
    $('.tabs .tab').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        let id = $(this).index();
        $('.contents .content').eq(id).addClass('show').siblings().removeClass('show');
    })
</script>
</html>

还是挺简洁的吧

0

评论 (0)

取消