JavaScript原生动态切换tab样式

最新推荐文章于 2022-06-27 14:24:19 发布

可爱滴菜鸟

最新推荐文章于 2022-06-27 14:24:19 发布

阅读量353

点赞数

分类专栏： JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_48802738/article/details/113173993

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<style>
    .box {
        display: flex;
        width: 500px;
        justify-content: space-between;
        border: 1px solid darkgray;
        align-items: center;
        height: 60px;
    }

    .box div {
        text-align: center;
    }

    .active {
        color: red;
        font-weight: bold;
    }
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
    $(function () {
        let titleList = ['音乐', '电影', '娱乐', '动画'];
        let html = '';
        let index = 0;//默认显示样式div
        let divList = [];

        //切换数据
        function setTabBar(arr) {
            arr.forEach(function (item) {
                html += '<div>' + item + '</div>'
            });
            $('.box').html(html);
            divList = $('.box>div');
            divList[index].className = 'active';
        }

        setTabBar(titleList);

        //div点击事件切换样式,切换卡片
        for (let i = 0; i < divList.length; i++) {
            divList[i].onclick = function () {
                divList[index].className = '';
                divList[i].className = 'active';
                index = i;
            }
        }
    })
</script>


<body>
<div>
    <div class="box">
    </div>

</div>

可爱滴菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原生动态切换tab样式

<style> .box { display: flex; width: 500px; justify-content: space-between; border: 1px solid darkgray; align-items: center; height: 60px; } .box div { text-align: center; } .
复制链接

扫一扫

专栏目录