⼀个页⾯多个页签的实现（css样式）
html源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>⽆标题⽂档</title>
<style type="text/css">
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
padding: .5em 2.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
#tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after {
background: #fff;
}
#tabs a:focus {
outline: 0;
}
#tabs a::after {
content:'';
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#tabs #current a, #tabs #current a::after {
background: #fff;
z-index: 3;
}
#content {
text-align:left;
background: #fff;
导航页源码
padding: 2em;
height: 300px;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p {
margin: 0 0 15px 0;
}
#about {
color: #999;
}
#about a {
color: #eee;
}
.allCont{ border:2px dashed #6CA6CD;}
</style>
<script type="text/javascript" src="leapis/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="leapis/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript">
$(function(){
$('#tabs a').click(function(e) {
e.preventDefault();
$("#content div").hide();
$("#tabs li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('title')).fadeIn();
alert($(this).attr('title'));
});
$("#exit").click(function(){
$("#devControlPageDiv,#bg").hide();
});
})
</script>
</head>
<body>
<div class="allCont">
<!-- 设备控制页⾯DIV -->
<div id="devControlPageDiv" class="showControl">
<ul id="tabs">
<li><a href="/" title="tab1">系统设定值</a></li>
<li><a href="#" title="tab2">冷⽔机组</a></li>
<li><a href="#" title="tab3">冷冻⽔泵</a></li>
<li><a href="#" title="tab4">冷却⽔泵</a></li>
<li><a href="#" title="tab5">冷却⽔塔</a></li>
<li><a href="#" title="tab6">冷却⽔塔</a></li>
<li><a href="#" title="tab7">冷却⽔塔</a></li>
<li><a href="#" title="tab8">冷却⽔塔</a></li>
<li><input id="exit" type="button" value="关闭" title="tab6" class="close"></input></li>
</ul>
<div id="content">
<div id="tab1">
<h2>1111111111111111111111</h2>
</div>
<div id="tab2">
<h2>22222222222222222222222</h2>
</div>
<div id="tab3">
<h2>3333333333333333333333333</h2>
</div>
<div id="tab4">
<h2>44444444444444444</h2>
</div>
<div id="tab5">
<h2>55555555555555555</h2>
<h2>55555555555555555</h2>
</div>
<div id="tab6">
<h2>6666666666666</h2>
</div>
<div id="tab7">
<h2>77777777</h2>
</div>
<div id="tab8">
<h2>8888888</h2>
</div>
</div>
<br/>
<br/>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。