返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

动感效果的TAB选项卡jquery 插件

2020-05-22 21:59:35易采站长站整理

效果图:

动感效果的TAB选项卡 jquery 插件

<!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=utf-8″ />
<title>无标题文档</title>
<link href=”tab.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”tab.js”></script>
<script type=”text/javascript”>
$(function() {
zeng.tab.init();
});
</script>
</head>
<body>
<div class=”clearfix” id=”hot”>
<div class=”main_l tab”>
<div class=”main_title clearfix”>
<ul class=”fx”>
<li class=”on”><a href=”#”>你是gril</a></li>
<li class=””>我是boy</li>
</ul>
</div>
<div class=”t”>
<div class=”main_content clearfix”>
我在香格里拉
</div>
</div>
<div class=”t none”>
<div class=”main_content clearfix”>
呵呵
</div>
</div>
</div>
</div>
</body>
</html>

样式：

@charset “utf-8”;
/* CSS Document */
#hot {
height: 565px;
overflow: hidden;
}
.clearfix {
display: block;
}
.clearfix::after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul {
list-style: none outside none;
}
body {
line-height: 1.5;
}
a, a:link, a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: none;
}
.main {
padding: 0 10px 0 167px;
position: relative;
width: 823px;
}
.main_l {
float: left;
position: relative;
width: 513px;
}
.main_r {
float: right;
position: relative;
width: 300px;
}
.main_title {
background: url(“images/s.png”) no-repeat scroll 0 0 transparent;
float: left;
height: 28px;
overflow: hidden;
}
.main_title ul {
font-size: 14px;
}
.main_title ul li {
background: none repeat scroll 0 0 #F1F1F1;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 3px solid #FFFFFF;
float: left;
height: 23px;
line-height: 23px;

相关文章 大家在看