• 查看作者
  • jQ菜单栏tab点击切换 / 移除添加class方法

    上期我们说到 “ jQuery / 添加 / 删除 / 切换class方法 ” 那就按这个方法思路来实现我们网站常用的tab点击切换内容。这篇文章过程展示,元素中某个类在添加和删除之间的切换class效果过程,也就是JQ中的切换事件。

    jQ菜单栏tab点击切换 / 移除添加class方法 第1张图片

    引用js

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    PS:使用前先检测网站是否有jquery.js文件,一般网站都有,如果没有必须引用上方js文件。

    js代码

    $('body').on('click','.laohan-this a',function(){
        $('.laohan-ul>div').css('display','none');
        $('.laohan-this a').removeClass('hover');
        $(this).addClass('hover');
        $('.laohan-ul-div-'+$(this).attr('data-id')).css('display','block');
        
    })

    PS:请先本地创建一个js文件,复制上方代码,上传到网站js目录。js放引用页面</head>里面

    html代码

    <div class="laohan-this">
    <a data-id="1" class="hover">1</a>
    <a data-id="2" class="">2</a>
    <a data-id="3" class="">3</a>
    </div>
    <br><br><br>
    <div class="laohan-ul">
    <div class="laohan-ul-div-1">
    放切换内容1
    </div>
    <div class="laohan-ul-div-2">
    放切换内容2
    </div>
    <div class="laohan-ul-div-3">
    放切换内容3
    </div>
    </div>

    PS:复制上方调用代码,放到首页需要切换tab的位置,可以是首页,可以是栏目页...都没问题

    css代码

    .laohan-this a {
        margin: 10px 10px 0px 0px;
        line-height: 30px;
        width: 200px;
        color: #999;
        text-align: center;
        float: left;
        background: #f7f7f7;
        user-select: none;
        position: relative;
        z-index: 1;
        cursor:pointer;
    }
    .laohan-this a.hover {
        color: #5298ff;
        border: 1px solid #efefef;
    }
    .laohan-div-1{
        display: block;
    }
    .laohan-ul-div-2,.laohan-ul-div-3{
        display: none;
    }

    PS:请先本地创建一个css文件,复制上方代码,上传到网站css目录。css放引用页面</head>里面

    墨初
  • 1
  • 0
  • 1
  • 877
  • #笔记
  • 请登录之后再进行评论

    登录
    最新评论