tab页面切换效果

最新推荐文章于 2022-06-22 16:08:00 发布

a伊雪

最新推荐文章于 2022-06-22 16:08:00 发布

阅读量816

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/u010565037/article/details/53542198

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

tab页面切换效果1：

HTML代码如下：

<!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"/>
<title>tab切换</title>
<link rel="stylesheet" type="text/css" href=""/>
<style type="text/css">
#tab li {float:left;margin-top:30px;width:100px;height:30px;line-height:30px;text-align:center;background:#5F5F55;
border-right:1px white solid;color:white;}
#tab li.fli {background-color:#2A97E0;color:white;}
#tab {overflow:hidden;zoom:1;list-style-type:none; margin-bottom: 0px;-webkit-padding-start: 0px; }
.tab_con {width:100%;height:100%;float:left;}
.tab_con .fdiv {display:block;float:left;border:1px #bbb solid;width:100%;height:100%;}
.tab_con .hidden {width:100%;display:none;border:1px #bbb solid;}
</style>
</head>
<body>
<div class="content">
<ul id="tab">
<li class="fli tab1">待审批</li>
<li class="tab2">布控中</li>
<li class="tab3">已关闭</li>
</ul>
<div class="tab_con">
<div class="fdiv tabCon1">
aaaa
</div>
<div class="fdiv tabCon2 hidden">bbbb
</div>
<div class="fdiv tabCon3 hidden">cccc
</div>
</div>
</div>

</body>
</html>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var tabs=$("#tab").find("li");
//alert(tabs.length);
for(var i=0;i<tabs.length;i++){
tabs[i].οnclick=function(){
var tabClass = $(this).attr("class");
for(var i=0;i<tabs.length;i++){
if(tabs.eq(i).attr("class") != tabClass && tabs.eq(i).hasClass('fli')){
tabs.eq(i).removeClass("fli");
var currNum = tabs.eq(i).attr("class").split("b")[1];
$(".tabCon"+currNum).addClass("hidden");
}
}
$("."+tabClass).addClass("fli");
$(".tabCon"+tabClass.split("b")[1]).removeClass("hidden");
};
}

</script>

tab页面切换效果2：

<!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"/>
<title>tab切换</title>
<link rel="stylesheet" type="text/css" href=""/>
<style type="text/css">
.content{float:left;width:85%;height:600px;}
#tab li {float:left;margin-top:30px;width:100px;height:30px;line-height:30px;text-align:center;background:#5F5F55;
border-right:1px white solid;color:white;}
#tab li.fli {background-color:#2A97E0;color:white;}
#tab {overflow:hidden;zoom:1;list-style-type:none; margin-bottom: 0px; }
#tab_con {width:100%;height:100px;float:left;}
#tab_con div {width:100%;height:100%;display:none;border:1px #bbb solid;}
#tab_con div.fdiv {display:block;}
</style>
</head>
<body>
<div class='content'>
<ul id="tab">
<li class="fli">待审批</li>
<li>布控中</li>
<li>已关闭</li>
</ul>
<div id="tab_con">
<div class="fdiv">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
</div>
</div>
<script type="text/javascript">
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tab_con").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
tabs[i].οnclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++){
if(tabs[i]==obj){
tabs[i].className="fli";
divs[i].className="fdiv";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>

a伊雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
tab页面切换效果

tab页面切换效果1：HTML代码如下：tab切换#tab li {float:left;margin-top:30px;width:100px;height:30px;line-height:30px;text-align:center;background:#5F5F55; border-right:1px white solid;color:whit
复制链接

扫一扫

专栏目录