标签页功能是一个比较常用的功能。虽然很多前端框架、插件都带有若干种标签页的功能实现,我依然觉得掌握其基本实现会更有利于我们对这个功能的理解,我们也可以更容易地根据实际情况进行修改。
以下代码示例是一个比较常见的实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab标签页</title>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
.tab_head{
border-bottom: 1px solid blue;
width: 512px;
margin-left: 40px;
height: 32px;
}
li{
float: left;
list-style: none;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 26px;
margin-right: 2px;
color: #fff;
background-color: #1979CA;
cursor: pointer;
}
.active{
background-color: #fff;
color: black;
border-top: 3px solid blue;
border-right: 1px solid blue;
border-left: 1px solid blue;
}
.init{
clear: both;
width: 500px;
height: 200px;
display: none;
border: 1px solid blue;
border-top: none;
font-size: 20px;
margin-left: 40px;
padding: 5px;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="tab_head">
<ul>
<li id="tab1" data-season="1" class="active">春天</li>
<li id="tab2" data-season="2">夏天</li>
<li id="tab3" data-season="3">秋天</li>
<li id="tab4" data-season="4">冬天</li>
</ul>
</div>
<div class="tab_content">
<div id="content_1" class="init show">春天的雨是柔和的,只见春雨在竹枝、竹叶上跳动着。那雨时而直线滑落,时而随风飘洒,
留下如烟、如雾、如纱、如丝的倩影,飞溅的雨花仿佛是琴铉上跳动的音符,奏出优美的旋律。</div>
<div id="content_2" class="init">小鸟不知躲匿到什么地方去了;草木都垂头丧气,像是奄奄等毙;只有那知了,不住地在枝头发出破碎
的高叫;真是破锣碎鼓在替烈日呐喊助威!</div>
<div id="content_3" class="init">秋天的风,秋天的叶,秋天的色调,秋天的阳光,构成了一幅绝妙的秋景图。图画中埋藏了许许多多的秘密,
只要我们善于发现,就可以揭开;图画中蕴藏了许许多多的人生哲理,只要我们积极求索,就可以领悟。
图画中展现了许许多多多姿的人生,只要我们端正态度,就可以拥有。</div>
<div id="content_4" class="init">阳光给人们的一种感觉是温暖的,冬日的阳光也不例外,它给人们的第一种感觉是温暖,在寒冷的冬天里,
早晨太阳升了起来,把金色的光辉洒在大地上,大地妈妈苏醒了,不再那么寒冷。</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#tab1,#tab2,#tab3,#tab4").click(function() {
//获取标签页代号
var num = $.trim($(this).attr("data-season"));
//删除兄弟元素的 active 类样式
$("#tab"+num).siblings().removeClass("active");
$("#tab"+num).addClass("active");
$("#content_"+num).siblings().removeClass("show");
$("#content_"+num).addClass("show");
});
})
</script>
</html>
效果图如下:
当然,内容可以放在 div 中,也可以写 form 表单,写表格等甚至放不同的页面都行,根据实际情况填充内容。
另外写了两种标签页样式,仅供参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flowicon</title>
<style type="text/css">
.icon1{
height: 0;
width: 100px;
float: left;
border-bottom: 55px solid #1979CA;
border-left: 30px solid transparent;
/* border-right: 30px solid transparent; */
border-top-left-radius: 40px;
border-top-right-radius: 5px;
color: #fff;
text-align: center;
line-height: 55px;
}
.content{
width: 518px;
height: 300px;
border: 1px solid #1979CA;
border-top: none;
clear: both;
}
</style>
</head>
<body>
<div class="icon1">标签一</div>
<div class="icon1">标签二</div>
<div class="icon1">标签三</div>
<div class="icon1">标签四</div>
<div class="content"></div>
</body>
</html>
效果如下:
另一种样式如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flowicon</title>
<style type="text/css">
.icon2{
height: 50px;
width: 100px;
float: left;
background-color: #1979CA;
color: #fff;
text-align: center;
line-height: 50px;
}
.next{
float: left;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 30px solid #1979CA;
border-bottom: 25px solid transparent;
}
.pre{
float: left;
margin-left: -20px;
}
.preup{
clear: both;
width: 0;
height: 0;
border-bottom: 25px solid transparent;
border-right: 30px solid #1979CA;
}
.predown{
clear: both;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 30px solid #1979CA;
}
.content{
width: 518px;
height: 300px;
border: 1px solid #1979CA;
border-top: none;
clear: both;
}
</style>
</head>
<body>
<div class="icon2">开始</div><div class="next"></div>
<div class="pre">
<div class="preup"></div><div class="predown"></div>
</div>
<div class="icon2">审核</div><div class="next"></div>
<div class="pre">
<div class="preup"></div><div class="predown"></div>
</div>
<div class="icon2">复核</div><div class="next"></div>
<div class="pre">
<div class="preup"></div><div class="predown"></div>
</div>
<div class="icon2">结束</div>
<div class="content"></div>
</body>
</html>
效果如下: