首先将html标签写出
<div class="tabs">
<div class="title active">标题1</div>
<div class="title">标题2</div>
<div class="title">标题3</div>
<div class="content">内容1</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
</div>
接着写入一些样式
.tabs .title{
display: inline-block;
width: 50px;line-height: 30px;
text-align: center;
}
.tabs .content{
width: 300px;height: 300px;
background-color: orange;
display: none;
}
.active{
background-color: orange;
color:#fff;
}
.tabs :nth-of-type(4){
display: block;
}
引入jQuery文件,并写入jqery代码: js文件路径根据自己情况设置
<script src="./js/jquery-3.3.1.js"></script>
<script>
//思路1.单机title 切换选项卡
// 2.将active 去掉,当前添加active removeClass addClass
// 3.之前显示的content,当前对应title num个content显示 show hide
$(function(){
$(".tabs .title").click(function(){
//获取是第几个单机了
var num = $(".tabs .title").index($(this));
//之前有active的兄弟元素,去掉active
$(this).siblings(".active").removeClass("active");
//单机对象添加active
$(this).addClass("active");
//之前显示的cntent隐藏
$(".tabs .content:visible").hide();
//动态的创建一个显示器
var str=`.tabs .content:eq(${num});`
//显示对应的content
$(str).show();
})
})
</script>