做了一个tab页切换。点击不同tab,显示对应的内容信息
如图
=================HTML=====================
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>
<head>
<title> RunStyle </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/runstyle.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/runstyle.js"></script>
</head>
<body>
<!--content-->
<div class="content">
<ul class="tabnav">
<li class="current"><a href="javascript:void(0);">公司介绍</a><span>|</span></li>
<li><a href="javascript:void(0);">产品介绍</a><span>|</span></li>
<li><a href="javascript:void(0);">办公地址</a></li>
</ul>
<div class="tabcon gsjs">
<p>资产管理有限公司成立于2015年8月
</p>
<p>截至2015年10月31日，合作经纪人已突破 4000人。</p>
<p>成立3个月内，放款额已突破6亿元。</p>
</div>
<div class="tabcon cpjs">
<p>“合法便捷、抵押担保、利率优惠、专业风控、资深法务”
</p>
<p>在借款人提供完整资料的基础上，。</p>
</div>
<div class="tabcon bgdz">
<p><strong>北京总部：</strong></p>
<p><strong>上海分公司地址：</strong></p>
<p><strong>广州分公司地址：</strong></p>
</div>
</div>
<!--content-->
</body>
</html>
==========CSS===============
@charset "utf-8";
/*content*/
.content {
width: 1200px;
height: 590px;
margin: 0 auto;
}
.content .tabnav {
width: 960px;
height: 110px;
margin: 30px auto 10px;
text-align: center;
clear: both;
}
.tabnav .current {
background: url(../images/tabnav-bg.png) no-repeat center 60px;
width: 310px;
height: 80px;
}
.tabnav li {
display: inline-block;
width: 310px;
}
.tabnav li a {
font-size: 30px;
color: #333333;
font-weight: 150;
}
.tabnav span {
font-size: 30px;
color: #DDDDDD;
float: right;
}
.content .tabcon {
width: 960px;
height: 450px;
margin: 0 auto;
padding-top: 190px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content .tabcon.gsjs {
background: url(../images/runstyle-company-logo.png) no-repeat center 20px;
}
.content .tabcon.cpjs {
background: url(../images/cpjs-bg.png) no-repeat center 20px;
padding-top: 230px;
display: none;
}
.content .tabcon.bgdz {
background: url(../images/bgdz-bg.png) no-repeat 60px 10px;
padding-top: 10px;
padding-left: 460px;
display: none;
}
.content .tabcon p {
color: #323232;
font-size: 16px;
line-height: 28px;
text-indent: 2em;
}
.content .tabcon .margin-bottom {
margin-bottom: 20px;
}
/*content*/
==========JS===========
$(document).ready(function() {
$(".tabCon:first").show();
$(".tabnav li").click(function() {
//alert($(this).index());把span放在li里面，这样点击弹出的是自己的数值
$(".current").removeClass("current");
$(this).attr("class", "current");
$(".tabcon").hide();
$(".tabcon").eq($(this).index()).show();
});
});
=====================
感谢一棵树-江华,完善
下载地址：http://files.cnblogs.com/files/leshao/tab%E9%A1%B5%E5%88%87%E6%8D%A2.rar