效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqpanel</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tab_panels{
padding: 20px;
}
.tab_panels ul li{
display: inline-block;
background-color: rgb(177, 175, 175);
color: white;
height: 30px;
text-align: center;
line-height: 30px;
width: 70px;
border-radius: 10px 10px 0 0;
}
.tab_panels ul li:hover{
background-color: gray;
}
.tab_panels ul li.active{
background-color: gray;
}
.tab_panels .panel{
padding: 35px 20px;
font-size: 18px;
display: none;
border-radius: 0 0 10px 10px;
background-color: rgb(185, 183, 183);
width: 400px;
height: 120px;
}
.tab_panels .panel.active{
display: block;
}
</style>
</head>
<body>
<div class="tab_panels">
<ul class="tabs">
<!-- 这里的rel也可以使用data-你自己定义的属性以建立关联 -->
<li rel='panel1' class="active">panel1</li>
<li rel='panel2'>panel2</li>
<li rel='panel3'>panel3</li>
<li rel='panel4'>panel4</li>
</ul>
<div id="panel1" class="panel active">
content1<br/>
content1<br/>
content1<br/>
content1<br/>
content1<br/>
</div>
<div id="panel2" class="panel">
content2<br/>
content2<br/>
content2<br/>
content2<br/>
content2<br/>
</div>
<div id="panel3" class="panel">
content3<br/>
content3<br/>
content3<br/>
content3<br/>
content3<br/>
</div>
<div id="panel4" class="panel">
content4<br/>
content4<br/>
content4<br/>
content4<br/>
content4<br/>
</div>
</div>
<script src="/jQuery/js/jquery-3.5.1.js"></script>
<script>
$(function(){
/********写法一,该写法存在一些不足之处
* css选择器中 .tab_panels的频繁使用将降低程序的效率,并且造成某些错误(存在多个tab_panels出现问题)
**使用过多的回调函数,逻辑上判断存在麻烦————回调地狱
$('.tab_panels .tabs li').on('click',function(){
// 先将选项卡进行切换
//移除现有的active类
$('.tab_panels .tabs li.active').removeClass('active');
//添加所点击元素的active类;
$(this).addClass('active');
// 获取需要显示的panelId通过rel属性
var panelId = $(this).attr('rel');
// alert(panelId);
//这里使用回调函数,再原来的panel上滑后,调用使点击的panel下滑的函数
$('.tab_panels .panel.active').slideUp(300,function(){
//在此之前需要把原来的active类移除
$(this).removeClass('active');
//显示点击的panel,注意这里是Id,需要+“#”号
$('#'+panelId).slideDown(300,function(){
//在下滑后,需要把现在的元素加上active类
$(this).addClass('active');
});
})
});
*/
//*****推荐写法
$('.tab_panels .tabs li').on('click',function(){
$panel = $(this).closest('.tab_panels');//这里的$panel 特指jQuery中的变量
// 先将选项卡进行切换
//移除现有的active类,添加所点击元素的active类;
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
// 获取需要显示的panelId通过rel属性
var panelId = $(this).attr('rel');
//alert(panelId);
// 通过函数外置,理清逻辑
$panel.find('.panel.active').slideUp(300,showNextPanel);
function showNextPanel(){
//在此之前需要把原来的active类移除
$(this).removeClass('active');
//显示点击的panel,注意这里是Id,需要+“#”号
$('#'+panelId).slideDown(300,function(){
//在下滑后,需要把现在的元素加上active类
$(this).addClass('active');
});
}
});
});//最外层
</script>
</body>
</html>