效果图如下:
tab切换通过js和jquery实现,代码如下(主要是调css样式比较麻烦,其他的都比较简单):
1、页面切换通过js实现(有点繁琐,每个tab都要写一个onclick方法):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.contentwrap {
width: 98%;
margin: 0 auto;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding-left: 20px;
}
ul.tab {
border-bottom: 1px solid #ccc;
padding-bottom:1px;
height: 30px;
line-height: 30px;
color: #696969;
}
ul.tab li {
float: left;
font-family: "微软雅黑";
cursor: pointer;
padding: 0px;
}
ul.tab li.li {
padding: 0px 25px 0px;
font-size: 13px;
height: 30px;
line-height: 30px;
background:#F4F5F9;
border-top: 1px solid #C5D0DC;
border-left: 1px solid #C5D0DC;
border-bottom: 1px solid #C5D0DC;
}
ul.tab li.current {
border-bottom: 0px;
border-top: 2px solid #7599DE;
font-size: 13px;
color: #343434;
background:#FFFFFF;
}
ul.tab li.li:last-child{border-right: 1px solid #C5D0DC;}
</style>
</head>
<body>
<div id="contentwrap" class="contentwrap">
<ul class="tab">
<li id="li_stage" class="li current" onclick="toStageInfo()"><span>tab1</span></li>
<li id="li_class" class="li" onclick="toClaRecordDetail()"><span>tab2</span></li>
<li id="li_photo" class="li" onclick="toTrainPhoto()"><span>tab3</span></li>
</ul>
</div>
</body>
<script>
function toStageInfo() {
document.getElementById("li_stage").className="li current";
document.getElementById("li_class").className="li";
document.getElementById("li_photo").className="li";
}
function toClaRecordDetail() {
document.getElementById("li_stage").className="li";
document.getElementById("li_class").className="li current";
document.getElementById("li_photo").className="li";
}
function toTrainPhoto() {
document.getElementById("li_stage").className="li";
document.getElementById("li_class").className="li";
document.getElementById("li_photo").className="li current";
}
</script>
</html>
2、页面切换通过jquery实现(用此方法实现时需要自己引入jquery.js,各位在参考是要把<script src="jquery.min1.11.1.js"></script>这行代码换成自己本地的路径)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.....
</style>
<script src="jquery.min1.11.1.js"></script>
</head>
<body>
<div id="contentwrap" class="contentwrap">
<ul class="tab" id="tab">
<li id="li_stage" class="li current"><span>tab1</span></li>
<li id="li_class" class="li"><span>tab2</span></li>
<li id="li_photo" class="li"><span>tab3</span></li>
</ul>
</div>
</body>
<script>
$(function(){
$('#tab > li').on("click",function(){
var num=$(this).index();
//var src=basePath+urlArr[num];
$('#tab > li').each(function(){
if($(this).index()==num){
$(this).attr("class","li current");
}else{
$(this).attr("class","li");
}
});
//$('#classify_iframe').attr("src",src);
});
});
</script>
</html>