jquery切换图标选项卡

最新推荐文章于 2022-08-02 15:55:50 发布

崔程行

最新推荐文章于 2022-08-02 15:55:50 发布

阅读量1k

点赞数 1

分类专栏： web前端文章标签：选项卡换图标选项卡 jQuery选项卡

本文链接：https://blog.csdn.net/cuichenghang/article/details/73105927

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{

            list-style: none;
        }
        body{
            background: #f6f6f6;
        }
        .active{
            background: red;
        }
        #box li{
            display: none;
        }
        #ul{
            background: #fff;
        }
        #ul li{
            float: left;
            width:200px;
        }
        #ul li img{
            width:60px;
            padding:10px;
        }
        #ul:after{
            content: "020";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li id="n1" class="active"><img src="image/n1_hover.png"></li>
        <li id="n2"><img src="image/n2.png"></li>
        <li id="n3"><img src="image/n3.png"></li>
    </ul>
    <ul id="box">
        <li style="display: block">111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        $(function(){
            function tab(navItem,boxItem,navActiveClassName){
                navItem.click(function(){
                    $(this).addClass(navActiveClassName).siblings().removeClass(navActiveClassName);
                    boxItem.eq($(this).index()).show().siblings().hide();
                    var id=$(this).attr("id");//id命名需要和图片名称一样
                    navItem.each(function(){
                        var newId=$(this).attr("id");
                        if(id==newId){
                            $(this).find("img").attr("src","image/"+id+"_hover.png");//点亮的图片名称加_hover
                        }else {
                            $(this).find("img").attr("src","image/"+newId+".png");
                        }
                    })
                })
            }
            tab($("#ul li"),$("#box li"),"active");
        })
    </script>
</body>
</html>

崔程行

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery切换图标选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> <style> *{ margin:0;
复制链接

扫一扫