一个页面多个页签的实现（css样式）

最新推荐文章于 2022-08-30 10:38:15 发布

原创最新推荐文章于 2022-08-30 10:38:15 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

9 篇文章

订阅专栏

这个示例展示了如何使用CSS来创建一个带有多个页签的页面布局。HTML结构包括一个ID为'tabs'的无序列表，其中包含多个链接页签，每个链接页签对应一个内容区域。通过CSS实现了页签的背景、边框、阴影等样式，并使用JavaScript（jQuery）处理点击事件，以切换显示相应的内容区域。

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=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:'';
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="http://ajax.googleapis.com/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 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>

</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>