jquery实现tab菜单点击换菜单图片方法

最新推荐文章于 2022-10-02 14:55:22 发布

原创最新推荐文章于 2022-10-02 14:55:22 发布 · 987 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery实现的Tab菜单效果，通过点击不同菜单项来切换对应的图片显示。该效果利用了CSS样式和jQuery事件监听功能，实现了菜单项激活状态的切换及相应图片的展示。

jquery实现tab菜单点击换菜单图片方法 代码如下


  

   
    
    


   
    
    


   
    
    


   
    
    


  

.menulist{
    width:100%;
    height:auto;
    overflow: hidden;
    background: #b49b87;
}
.menulist p{
    width: 23.2%;
    text-align: center;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-left: 0.2rem;
    margin-top: 0.4rem;
    float: left;
    position: relative;
}
.menulist p img{
    width:100%;
}
.img1{
    width:100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 2;
}
.active .img1{
    display: none;
}

    $('.menulist p').on('click', function () {
        $(this).addClass('active');
        $(this).siblings('p').removeClass("active");
 
    })


ps 原理就是 点击控制class 


查看原文：http://newmiracle.cn/?p=1470