javascript实现tab响应式切换特效
本文实例讲解了tab响应式切换效果，利用js对样式进行动态切换即可。多的不说，请看代码
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<title>tab响应式切换效果</title>
<linkrel="stylesheet"href="css/tab.css">
<scripttype="text/javascript"src="js/jquery.js"></script>
</head>
<body>
<!--代码部分begin-->
<divclass="wrap"height="100%">
<divclass="tabs"height="20%">
<ahref="#"class="active">tab1</a>
<ahref="#">tab2</a>
<ahref="#">tab3</a>
</div>
<divclass="swiper-container"height="80%">
<divclass="swiper-wrapper">
<divclass="swiper-slide">
<divclass="content-slidecontentin"id="contentref1">
tab内容一
</div>
</div>
<divclass="swiper-slide">
<divclass="content-slide"id="contentref2">
tab内容二
</div>
</div>
<divclass="swiper-slide">
<divclass="content-slide"id="contentref3">
tab内容三
</div>
</div>
</div>
</div>
</div>
<script>
//$("#contentref1").load("CheckRecord1.html");//初始化加载tab1
$(".tabsa").each(function(index){
//每一个包装a的jquery对象都会执行function中的代码
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
//有了index的值之后，就可以找到当前标签对应的内容区域
$(this).click(function(){
varliNode=$(this);
//将原来显示的内容区域进行隐藏
$(".tabs.active").removeClass("active");
//对有tabin的class定义的li清除tabin的class
$(".contentin").removeClass("contentin");
//当前标签所对应的内容区域显示出来
$("div").eq(index).addClass("contentin");
$("div.content-slide:eq("+index+")").addClass("contentin");
liNode.addClass("active");
if(index==0){
//装入静态完成页面
//$("#contentref1").load("CheckRecord1.html");
}elseif(index==1){
//装入动态部分页面
//$("#contentref2").load("CheckRecord.jsp");
}elseif(index==2){
//装入远程数据（这里也是一个动态页面输出的数据）
//$("#contentref1").load("TabData.jsp")
}
});
});
</script>
<!--代码部分end-->
</body>
</html>
tab.css
body{margin:0;font-family:"microsoftyahei";font-size:13px;line-height:1.5;background:#eee;}
.wrap{margin:0auto0auto;}
.tabs{height:25px;}
.tabsa{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;}
.tabsa.active{color:#fff;background:#CDC8B1;border-radius:5px5px0px0px;}
.swiper-container{background:#CDC8B1;height:100%;border-radius:005px5px;width:100%;border-top:0;}
.swiper-slide{height:100%;width:100%;background:none;color:#fff;}
div.content-slide{padding:40px;display:none;}
div.contentin{display:block;}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。