jQ菜单栏tab点击切换 / 移除添加class方法

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

引用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>里面