用jquery+html实现选中时底部(tabs导航)图片和文字的切换

最新推荐文章于 2024-07-25 11:52:08 发布

00秃头小宝贝

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量358

点赞数

文章标签： jquery html 前端

原文链接：https://blog.csdn.net/weixin_50450473/article/details/119676763?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169119824216800186579580%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=169119824216800186579580&b

版权

1.效果图

2.html:其中图片的命名需注意，默认 t0 t1 t2，选中的 tabbar0 tabbar1 tabbar2

<!-- 切换内容 -->
    <div class="home_content">
        <div id="c1" class="card1">首页</div>
        <div id="c2" class="card1">学习</div>
        <div id="c3" class="card1">我的</div>
    </div>
    <!-- 底部导航 -->
    <div class="nav big_box">
        <ul class="navs">
            <li class="active">
                <a href="#c1">
                    <img src="images/t0.png" alt="">
                    <p class="s24">首页</p>
                </a>
            </li>
            <li>
                <a href="#c2">
                    <img src="images/t1.png" alt="">
                    <p class="s24">学习</p>
                </a>
            </li>
            <li>
                <a href="#c3">
                    <img src="images/t2.png" alt="">
                    <p class="s24">我的</p>
                </a>
            </li>
        </ul>
    </div>

3.图片命名

4.script

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script>
        // 导航
        $(".card1").hide();
        $("ul.navs li:first").addClass("active").show();
        $("ul.navs li:first img").attr('src', 'images/tarbar0.png');
        $(".card1:first").show();
        $("ul.navs li").click(function () {
            var index = $("ul.navs li").index(this);
            console.log(index, 'imgBox')
            var imgBox = "<img src='images/tarbar" + index + ".png' alt='' />";
            console.log(imgBox, 'imgBox')
            $("ul.navs img").eq(index).replaceWith(imgBox); // 给指定的下标替换成新的图片
            $("ul.navs li").removeClass("active");
            $(this).addClass("active");
            $(".card1").hide();
            $(this).siblings().each(function () {
                var $Imgs = $(this).find("img");
                var Ind = $("ul.navs li").index(this);
                $Imgs.attr("src", "images/t" + Ind + ".png");
            });
            var activeTab = $(this).find("a").attr("href");
            $(activeTab).fadeIn();
            return false;
        });

    </script>

5.css

 <style>
        /* 导航 */

        .nav {
            background: #fff;
            height: 3rem;
            text-align: center;
        }

        .nav ul {
            margin: 0;
        }

        .nav ul li {
            display: inline-block;
            font-size: 1.024rem;
            text-align: center;
            width: 25%;
            padding: 1vw 2.2vw 4vw 2.2vw;
        }

        .nav ul li a {
            color: #999;
        }

        .nav ul li img {
            height: 1.28rem;
        }

        .nav .active a {
            /* // 选中的文本样式 */
            color: #333;
            font-weight: bold;
        }

        .big_box {
            /* // 定位到底部 */
            position: fixed;
            bottom: 0;
            width: 96vw;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 8%);
        }

        #c1::-webkit-scrollbar,
        #c2::-webkit-scrollbar,
        #c3::-webkit-scrollbar {
            width: 0;
        }

        #c1,
        #c2,
        #c3 {
            /* // 为每个切换模块加高度 */
            height: 93vh;
        }
    </style>