DIV/CSS+Jquery自己写的分页标签

一个简单的分页标签的样式

1》html

<div class="tabview" style="margin:10px;" mce_style="margin:10px;">
<ul class="tab">
<li class="active">图表</li>
<li>数据</li>
<li>查询</li>
</ul>
<div id="A_Area" class="show">
<div class="tabcontent">1111111</div>
</div>
<div id="B_Area">
<div class="tabcontent">2222222</div>
</div>
<div id="C_Area">
<div class="tabcontent">3333333</div>
</div>
</div>

2》css

div.tabview{
margin: 2px;
border: 1px solid #d8d8d8;
}
div.tabview ul{
margin: 0px;
width: inherit;
height: 28px;
background: #C4C4C4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.796875)), to(rgba(255, 255, 255, 0)));
}
ul.tab{
background:url(../images/header.jpg) repeat-x 100% 50%;
}
.tabview li{
float: left;
width: 50px;
margin-left: 1px;
margin-right: 1px;
margin-top:2px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #d5d5d5;
border-left: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-top: 1px solid #d8d8d8;
display: block;
-moz-border-radius:5px 5px 0px 0px;               /* For Firefox3.6+ */
border-radius:5px 5px 0px 0px;
}
.tabview li.active{
background-color: #ffffff;
border-bottom: none;
}
.tabview li.hover{
background-color: #00c8c8;
border-bottom: none;
cursor: pointer;
}
.tabview li:click{
background-color: #00c8c8;
border-bottom: none;
cursor: pointer;
}
.tabcontent{
padding: 2px;
margin: 3px;
border: 1px solid #00c8c8;
min-height: 100px;
}

3》js

<mce:script src="../resources/js/jquery.js" mce_src="resources/js/jquery.js" type="text/javascript"/><!--
<script>
jQuery(function(){
jQuery("div.tabview > div[class!='show']").hide();

jQuery("ul.tab li").click(function(){
jQuery(this).addClass("active").siblings().removeClass("active");
var index = jQuery(this).index("ul.tab li");
jQuery("div.tabview > div").eq(index).show().siblings("div").hide();
}).hover(function(){
jQuery(this).addClass("hover");
}, function(){
jQuery(this).removeClass("hover");
})
})

// --></mce:script>

4》效果



5》圆角css

-moz-border-radius:5px 5px 0px 0px; /* For Firefox3.6+ */这个是火狐浏览器3.6+的圆角，5px代表圆角半径

border-radius:5px 5px 0px 0px; 这个是与谷歌浏览器使用一样引擎的浏览器圆角写法

在ie下使用圆角必须要用图片或者使用多个层

6》渐变色css

background: #C4C4C4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.796875)), to(rgba(255, 255, 255, 0))); 这个是在webkit浏览器下使用的渐变色css

background:url(../pic/*.jpg) repeat-x 100% 50%;在ie下面常使用的方法就是图片