首页 > 代码库 > tab响应式切换效果

tab响应式切换效果

2024-10-22 08:56:02   210人阅读

      实现tab响应式切换效果，利用js对样式进行动态切换即可。 多的不说，请看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>tab响应式切换效果</title>
<link rel="stylesheet" href=http://www.mamicode.com/"css/tab.css">>

tab.css
body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;}
.wrap{margin:0 auto 0 auto;}
.tabs{height:25px;}
.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;}
.tabs a.active{color:#fff;background:#CDC8B1;border-radius:5px 5px 0px 0px;}
.swiper-container{background:#CDC8B1;height:100%;border-radius:0 0 5px 5px;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;}



tab响应式切换效果


联系
我们