主要用了选项卡;

因为只有两个选项卡,没有用以前写的模块化开发进行做;

因为用了float;而且float又脱离文档刘;

 

所以做了一个公用

<div class="clear"></div>

这样就方便了;

.clear{ clear:both; height:0px; overflow:hidden;}/*清楚浮动用的;*/

具体代码如下:

HTML+CSS代码如下:

<!DOCTYPE html>
<
html>
<
head lang="en">
<
meta charset="UTF-8">
<
title>建筑公司网站</title>
<
link rel="stylesheet" href="css/css_whir.css"/>
</
head>
<
body>
<!--
顶部部分-->
<header class="Toper"
>
<
section class="Top">
<
div class="Share">
<
ul>
<
li class="SinaIndex"><a href="javascript:;">官方微博</a></li>
<
li class="OfficialIndex"><a href="javascript:;">官方</a></li>
<
li style="padding-right: 0;">
<!--调用JiaThis插件-->
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<
a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">一键分享</a>
<
a class="jiathis_counter_style"></a>
</
div>
<
script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=" charset="utf-8"></script>
<!-- JiaThis Button END -->
</li>
<
div class="clear"></div>
</
ul>
</
div>
<
div class="Logo">
<
a href="index.html"><img src="images/logo.jpg" alt="none"/></a>
</
div>
</
section>
</
header>
<!--
导航栏-->
<section class="TopNav"
>
<
section class="NavList">
<
div class="SreachBox">
<
a href="javascript:void(0)" onclick="return GoSearchUrl();" class="sreach_btn"></a>
<
input name="" type="text" class="sreach_ipu" id="key" value="立即搜索" onblur="if(this.value=='')this.value='立即搜索';" onfocus="if(this.value=='立即搜索')this.value='';" onkeydown="entersearch()"/>
<
div class="clear"></div>
</
div>
<
nav class="MainNav">
<
ul>
<
li id="nav1"><a class="navA" href="index.html">首页</a></li>
<
li id="nav2"><a class="navA" href="about.html">关于我们</a></li>
<
li id="nav3"><a class="navA" href="service.html">服务范围</a></li>
<
li id="nav4"><a class="navA" href="case.html">经典案例</a></li>
<
li id="nav5"><a class="navA" href="news.html">资讯中心</a></li>
<
li id="nav6"><a class="navA" href="contact.html">联系我们</a></li>
<
div class="clear"></div>
</
ul>
</
nav>
</
section>
</
section>
<!--banner
区域||需要JavaScript写选项卡的功能-->
<div class="HomeBan"
>
<
section class="HomeBanList" id="indexBanner">
<
ul class="TabHeads">
<
li class="TabHead headSelect"></li>
<
li class="TabHead"></li>
<
li class="TabHead"></li>
</
ul>
<
div class="tabContents">
<!--下面如果是动态的,用AJAX跨域,拼接的方式来实现;-->
<div class="tabContent contentSelect" style="background:url(uploadfiles/image/banner/HomeBanner.jpg) no-repeat center top;"></div>
<
div class="tabContent " style="background:url(uploadfiles/image/banner/HomeBanner2.jpg) no-repeat center top;"></div>
<
div class="tabContent " style="background:url(uploadfiles/image/banner/HomeBanner3.jpg) no-repeat center top;"></div>
</
div>
</
section>
</
div>
<!--
主要内容展示区-->
<section class="Contain"
>
<!--我能为您做什么?-->
<section class="HomeCont1">
<
div class="HomeCont1Main">
<
div class="HomeContTitle">
<
span>我能为您做什么?</span>
<
p>our services</p>
</
div>
<
div class="HomeContList">
<
ul>
<
li>
<
a href="javascript:;"><img src="images/ico1.jpg" alt="1"/></a>
<
span>1.绿色建筑认证咨询</span>
<
p>Green building <br /> certification consulting</p>
</
li>
<
li>
<
a href="javascript:;"><img src="images/ico2.jpg" alt="1"/></a>
<
span>1.绿色建筑认证咨询</span>
<
p>Green building <br /> certification consulting</p>
</
li>
<
li>
<
a href="javascript:;"><img src="images/ico3.jpg" alt="1"/></a>
<
span>1.绿色建筑认证咨询</span>
<
p>Green building <br /> certification consulting</p>
</
li>
<
li>
<
a href="javascript:;"><img src="images/ico4.jpg" alt="1"/></a>
<
span>1.绿色建筑认证咨询</span>
<
p>Green building <br /> certification consulting</p>
</
li>
<
li>
<
a href="javascript:;"><img src="images/ico5.jpg" alt="1"/></a>
<
span>1.绿色建筑认证咨询</span>
<
p>Green building <br /> certification consulting</p>
</
li>
<
li>
<
a href="javascript:;"><img src="images/ico6.jpg" alt="1"/></a>
<
span>1.绿色建筑认证咨询</span>
<
p>Green building <br /> certification consulting</p>
</
li>
</
ul>
</
div>
</
div>
</
section>
<!--经典案例-->
<section class="HomeCont2">
<
div class="HomeCont2Main" id="HomeCont2Main">
<
div class="HomeContTitle">
<
span>经典案例</span>
<
p>Classic case</p>
</
div>
<
ul class="HomeContTab">
<
li class="HomeContTabHead headSelect">居住建筑</li>
<
li class="HomeContTabHead">公共建筑</li>
<
li class="HomeContTabHead">工业建筑</li>
<
li class="HomeContTabHead">医疗建筑</li>
</
ul>
<
div class="HomeContGroup">
<
div class="HomeGroup1 contentSelect">
<
ul>
<
li>
<
a href="javascript:;"><img src="uploadfiles/image/HomeImg1.jpg" /></a>
<
a href="javascript:;" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="javascript:;"><img src="uploadfiles/image/HomeImg1.jpg" /></a>
<
a href="javascript:;" class="HomeCaseTitle">广西吉丽嘉逸</a>
<
p>建筑类型:居住类型<br />开发商:广西吉丽嘉益投资有限公司</p>
</
li>
<
li>
<
a href="javascript:;"><img src="uploadfiles/image/HomeImg1.jpg" /></a>
<
a href="javascript:;" class="HomeCaseTitle">振兴壹号产业综合楼</a>
<
p>建筑类型:公建类型<br />开发商:南宁市西乡塘区心圩街振兴二队二组</p>
</
li>
<
li>
<
a href="javascript:;"><img src="uploadfiles/image/HomeImg1.jpg" /></a>
<
a href="javascript:;" class="HomeCaseTitle">罗赖三产综合楼</a>
<
p>建筑类型:公建类型<br />开发商:南宁市西乡塘区心圩街道罗赖村</p>
</
li>
<
div class="clear"></div>
</
ul>
</
div>
<
div class="HomeGroup1">
<
ul>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg2.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg2.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg2.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg2.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
div class="clear"></div>
</
ul>
</
div>
<
div class="HomeGroup1">
<
ul>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg3.jpg" /></a>
<
a href="#" class="HomeCaseTitle">广西吉丽嘉逸</a>
<
p>建筑类型:居住类型<br />开发商:广西吉丽嘉益投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg3.jpg" /></a>
<
a href="#" class="HomeCaseTitle">广西吉丽嘉逸</a>
<
p>建筑类型:居住类型<br />开发商:广西吉丽嘉益投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg3.jpg" /></a>
<
a href="#" class="HomeCaseTitle">广西吉丽嘉逸</a>
<
p>建筑类型:居住类型<br />开发商:广西吉丽嘉益投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg3.jpg" /></a>
<
a href="#" class="HomeCaseTitle">广西吉丽嘉逸</a>
<
p>建筑类型:居住类型<br />开发商:广西吉丽嘉益投资有限公司</p>
</
li>
<
div class="clear"></div>
</
ul>
</
div>
<
div class="HomeGroup1">
<
ul>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg4.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg4.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg4.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
li>
<
a href="#"><img src="uploadfiles/image/HomeImg4.jpg" /></a>
<
a href="#" class="HomeCaseTitle">南宁青秀万达广场3组团</a>
<
p>建筑类型:综合体(商业、办公、居住)<br />开发商:南宁青秀万达广场投资有限公司</p>
</
li>
<
div class="clear"></div>
</
ul>
</
div>
</
div>
</
div>
</
section>
<!--咨询中心-->
<section class="HomeCont3">
<
div class="HomeCont3Main">
<
div class="HomeContTitle">
<
span>咨询中心</span>
<
p>Information Center</p>
</
div>
<
div class="HomeContList">
<
ul>
<
li>
<
span class="HomeContColName">公司新闻</span>
<
a href="javascript:;" class="HomeContListTitle">用速度冲击规模,使技术水平</a>
<
p>坚持无边界创新整合战略,用速度冲击规模,使技术水平达到国际建筑节能行业先进水平,在发展的道路上不断求索、创新,为人类创造环境友好型的明天</p>
<
a href="javascript:;" class="more">MORE</a>
</
li>
<
li>
<
span class="HomeContColName">公司新闻</span>
<
a href="javascript:;" class="HomeContListTitle">用速度冲击规模,使技术水平</a>
<
p>坚持无边界创新整合战略,用速度冲击规模,使技术水平达到国际建筑节能行业先进水平,在发展的道路上不断求索、创新,为人类创造环境友好型的明天</p>
<
a href="javascript:;" class="more">MORE</a>
</
li>
<
li>
<
span class="HomeContColName">公司新闻</span>
<
a href="javascript:;" class="HomeContListTitle">用速度冲击规模,使技术水平</a>
<
p>坚持无边界创新整合战略,用速度冲击规模,使技术水平达到国际建筑节能行业先进水平,在发展的道路上不断求索、创新,为人类创造环境友好型的明天</p>
<
a href="javascript:;" class="more">MORE</a>
</
li>
<
div class="clear"></div>
</
ul>
</
div>
</
div>
</
section>
</
section>
<!--head
底部-->
<footer class="Bottomer"
>
<
div class="Bottom">
<
div class="BottomLeft">
<
div class="Copyright">海南俊华绿色建筑服务有限公司© 2015 Jun Hua All Rights Reserved.</div>
<
nav class="BottomLinks"> <!--友情链接-->
<a href="#" target="_blank">合作伙伴</a>
<
em>|</em>
<
a href="#" target="_blank">网站地图</a>
<
em>|</em>
<
a href="#" target="_blank">法律声明</a>
<
em>|</em>
<
a href="#" target="_blank">友情链接</a>
<
em>|</em>
<
a href="#" target="_blank">访问统计</a>
</
nav>
</
div>
<
div class="BottomMain">
<
p>联络我们</p>
<
a href="#">查看本页面的实现原理</a>
<
p>地址/AddXXXXXXXXXXX
<br />
电话/TelXXXXXXXXXXX
<br />
邮箱/MailXXXXXXXXXXX
</p>
</
div>
<
div class="BottomRight">
<
img src="uploadfiles/image/wechat.jpg" />
<
p>扫一扫,<br />关注我们官方微信</p>
</
div>
<
div class="clear"></div>
</
div>
</
footer>
</
body>
</
html>
<
script src="js/dom2.js"></script>
<
script src="js/broszhu.js"></script>

~

CSS代码

如下

@charset "utf-8";
/*
清除样式部分*/
html{ font
:normal 62.5%/2.3em "微软雅黑";-webkit-user-select: none;}
body{ margin
:0px; padding:0px; margin:0px auto; font-size:1.2em; color:#414446; width:100%; min-width:1090px; width:expression((documentElement.clientWidth < 1090) ? "1090px" : "100%" ); zoom:1;}
ul,li,form, dl,dt,dd, div{ padding
: 0px; margin: 0px; list-style:none;}
select,input,textarea{ border-radius
:0; -webkit-border-radius:0; color:#414446;}
input
:focus { outline: none;}
input,button,select,textarea{outline
:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ }
textarea{resize
:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ }
textarea,input,select { background
:none; border:none; margin:0; padding:0;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption{ display
: block;} /*html5设置*/
figure,figcaption{ margin
:0px; padding:0px;}
audio,canvas,progress,video { display
: inline-block; vertical-align: baseline;}
img{ border
:none; border:0; vertical-align:top;}
a{ color
:#414446; text-decoration:none; noline:-webkit-tap-highlight-color:rgba(0,0,0,0);}
a
:focus {outline:none; -moz-outline:none;}
a
:hover{ text-decoration:none;}
.
clear{ clear:both; height:0px; overflow:hidden;}/*清楚浮动用的;*/

/*顶部的header*/
/*Top
区域的
*/
.Toper{ width
:100%; border-top:5px solid #2f9e75;}
.
Top{ width:1090px; margin:0 auto;}
.
Top .Share{float:right; padding-top:50px;}
.
Top .Share ul li{ float:left; padding-right:20px; line-height:1.5;}
.
Top .Share ul li a{ display:inline-block; padding-left:25px; color:#8f989d;}
.
Top .Share ul li a.jiathis_counter_style{ padding-left:10px;}
.
Top .Share ul li.SinaIndex a{ background:url(../images/ico_Sina.jpg) no-repeat left center;}
.
Top .Share ul li.OfficialIndex a{ background:url(../images/ico_Index.jpg) no-repeat left center;}
.
Top .Share ul li .jiathis_style .jtico{ background:url(../images/ico_add.jpg) no-repeat left center;}
/*
顶部导航栏*/
.TopNav{ width
:100%; background:#2f9e75;}
.
NavList{ width:1090px; margin:0 auto;}
.
SreachBox{ float:right; width:232px; height:29px; background:url(../images/searchbg.jpg) no-repeat left center; margin:10px 0;}
.
SreachBox .sreach_btn{ float:right; width:38px; height:29px; display:block;}
.
SreachBox .sreach_ipu{ width:175px; color:#c5e3d7; padding:5px 9px; font-family:"微软雅黑";}
.
MainNav{}
.
MainNav ul li{ float:left; padding-right:1px;}
.
MainNav ul li a{ padding:0 35px; display:inline-block; font-size:1.17em; color:#fff; line-height:3.5;}
.
MainNav ul li.onnav a,.MainNav ul li a:hover{ background:#4aab87;}
/*
底部栏*/
.Bottomer{background
:#1d7a58; width:100%; padding-top:50px; padding-bottom:20px;}
.
Bottom{ width:1090px; margin:0 auto;}
.
Bottom .BottomLeft{ width:485px;float: left;}
.
Bottomer .Bottom .BottomLeft .Copyright{color: #fff;}
.
Bottomer .Bottom .BottomLeft .BottomLinks{line-height: 3;}
.
Bottom .BottomLeft .BottomLinks em{ font-style:normal; padding:0 10px; color:#97c2b2;}
.
Bottom .BottomLeft .BottomLinks a{ color:#fff;}

.Bottom .BottomMain{ width:400px;float: left;}
.
Bottom .BottomMain a{ color: #FFF;}
.
Bottom .BottomMain p{ margin:0; line-height:1.5; color:#feffff;}
.
Bottom .BottomRight{ width:200px;float: left;}
.
Bottom .BottomRight img{ float:right; padding-left:10px;}
.
Bottom .BottomRight p{ margin:0; text-align:right; line-height:45px;}
/*index
部分的*/
/*1
banner区域
*/
.HomeBan{width
: 100%;height: 506px;}
/*控制的li部分*/
.HomeBanList .TabHeads{position
: relative;left: 50%;top: 460px;margin-left:-35px;}
.
HomeBanList .TabHeads li{float: left;width: 10px;height: 10px;border-radius: 50%;background:#2f9e75;border: 1px solid olivedrab; margin-right: 10px;cursor: pointer;}
.
HomeBanList .TabHeads li.headSelect{background: #FFF;}
/*控制的主体部分*/
.HomeBan .tabContents .tabContent {width
: 100%;height: 506px;display: none;}
.
HomeBan .HomeBanList .tabContents .contentSelect{display: block;}
/*2、主要内容展示区*/
/*
第一部分
*/
.HomeCont1{ width
:100%;}
.
HomeCont1 .HomeCont1Main{ width:1090px; margin:0 auto; padding:30px 0 45px;}
.
HomeCont1 .HomeCont1Main .HomeContTitle{ text-align:center; background:url(../images/ico_home1.png) no-repeat center top; padding-top:20px;}
.
HomeCont1 .HomeCont1Main .HomeContTitle span{ margin:0; font-size:2em; color:#2f9e75; line-height:1.5;}
.
HomeCont1 .HomeCont1Main .HomeContTitle p{ margin:0; color:#353251; text-transform:uppercase; font-size:1.17em;letter-spacing:1px;}/*letter-spacing是调节字距的;,text-transform 属性控制文本的大小写。
capitalize: 首字母大写
uppercase: 大写
lowercase: 小写
none: 正常无变化
inherit: 继承*/
/*.HomeCont1 .HomeCont1Main .HomeContList{padding-top: 40px;}
.HomeCont1 .HomeCont1Main .HomeContList ul li{ width:155px; float:left; text-align:center;padding-right:50px; }
.HomeCont1 .HomeCont1Main .HomeContList ul li a{ display:block;}
.HomeCont1 .HomeCont1Main .HomeContList ul li span{ color:#333333; font-size:1.17em; line-height:2;}
.HomeCont1 .HomeCont1Main .HomeContList ul li p{ margin:0; line-height:1.3; color:#9f9f9f;}*/
.HomeCont1 .HomeCont1Main .HomeContList{ padding-top
:40px;height: 210px;overflow: hidden;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li{ width:155px; float:left; text-align:center;padding-right: 25px;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li a{ display:block;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li span{ color:#333333; font-size:1.17em; line-height:2;}
.
HomeCont1 .HomeCont1Main .HomeContList ul li p{ margin:0; line-height:1.3; color:#9f9f9f;}
/*第二部分*/
.HomeCont2{width
: 100%;background: url("../images/bg2.jpg")repeat left top;border-bottom: 1px solid #177753;border-top: 1px solid #177753;}
.
HomeCont2 .HomeCont2Main{width: 1090px;margin: 0 auto;padding: 30px 0 60px;}
.
HomeCont2 .HomeCont2Main .HomeContTitle{text-align: center;background:url(../images/ico_home2.png) no-repeat center top;padding-top: 20px;}
.
HomeCont2 .HomeCont2Main .HomeContTitle span{font-size: 2em;line-height: 1.5;
color: #FFF;margin: 0;}
.
HomeCont2 .HomeCont2Main .HomeContTitle p{text-transform:uppercase;color: #7ccbad;padding-bottom: 10px;font-size: 1.17em;letter-spacing: 1px;margin: 0;}
.
HomeCont2 .HomeCont2Main .HomeContTab{text-align: center;padding-top: 20px;}
.
HomeCont2 .HomeCont2Main .HomeContTab .headSelect{ border: 1px solid #FFF; }/*JS选择标记;*/
.HomeCont2 .HomeCont2Main .HomeContTab li{font-size
: 1.17em;width: 110px;height: 36px;display: inline-block;color: #fff;border: 1px solid #CCC;line-height: 36px;margin:0 20px;cursor: pointer;}
.
HomeCont2 .HomeCont2Main .HomeContTab li:hover{border: 1px solid #FFF; }
.
HomeCont2 .HomeCont2Main .HomeContGroup{padding-top: 30px;}
.
HomeCont2 .HomeCont2Main .HomeGroup1{display: none;}
.
HomeCont2 .HomeCont2Main .contentSelect{display: block;}/*JS选择标记;*/
.HomeCont2 .HomeCont2Main .HomeGroup1 ul li{width
: 250px;padding: 7px 8px 7px 9px;background: rgba(250,250,250,0.1);text-align: center;float: left;margin-right: 5px;}
.
HomeCont2 .HomeCont2Main .HomeGroup1 ul li .HomeCaseTitle{color: #fefefe;border-bottom: 1px solid #FFF;display: block;line-height: 3;}
.
HomeCont2 .HomeCont2Main .HomeGroup1 ul li p{margin:0;color: #fefefe;line-height: 1.5;padding: 10px 0;}
/*
第三部分:咨询中心*/
.HomeCont3{width
: 100%;}
.
HomeCont3 .HomeCont3Main{width: 1090px;margin: 0 auto;padding: 30px 0 60px;}
.
HomeCont3 .HomeCont3Main .HomeContTitle{text-align: center;background: url("../images/ico_home1.png")no-repeat center top;padding-top: 20px;}
.
HomeCont3 .HomeCont3Main .HomeContTitle span{margin: 0;font-size: 2em;line-height: 1.5;color:#2f9e75;}
.
HomeCont3 .HomeCont3Main .HomeContTitle p{text-transform: uppercase;margin: 0;letter-spacing: 1px;}
.
HomeCont3 .HomeCont3Main .HomeContList{padding-top: 40px;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li{ width:313px; float:left; padding-right:50px;}
.
HomeCont3 .HomeCont3Main .HomeContList .HomeContColName{border-bottom:1px solid #999; color:#999;line-height:2;display: block;}
.
HomeCont3 .HomeCont3Main .HomeContList .HomeContListTitle{font-size: 1.2em;font-weight: bold;color:#666666; display:block;padding:25px 0 20px;line-height: 2;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li .HomeContListTitle:hover{text-decoration: underline;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li p{margin: 0;line-height: 1.5; color:#999999;}
.
HomeCont3 .HomeCont3Main .HomeContList ul li .more{width:60px; height:18px; display:block;border:1px solid #999;text-align: center;line-height: 1.5;margin-top: 30px;}

~~

JS比较简单:

/*banner选项卡*/
var oiBanner=document.getElementById("indexBanner"
),
oLi=oiBanner.getElementsByClassName("TabHead"),
oDiv2=oiBanner.getElementsByClassName("tabContent");
for(var i=0;i<oLi.length;i++
){
oLi[i].index=i;
oLi[i].onmouseover=function(){
tabChange(this.index)
};
};
function tabChange(index
){
for(var i=0;i<oLi.length;i++){
oLi[i].className="TabHead";
oDiv2[i].className="tabContent";
}
oLi[index].className="TabHead headSelect";
oDiv2[index].className="tabContent contentSelect";
}
/*banner
中间房型的选项卡*/
var oHomeCont2Main=document.getElementById("HomeCont2Main"
),
oHomeContTabHead=oHomeCont2Main.getElementsByClassName("HomeContTabHead"),
oHomeGroup1=oHomeCont2Main.getElementsByClassName("HomeGroup1");
for(var i=0;i<oHomeContTabHead.length;i++
){
oHomeContTabHead[i].index=i;
oHomeContTabHead[i].onmouseover=function(){
tabChange2(this.index)
};
};
function tabChange2(index
){
for(var i=0;i<oHomeContTabHead.length;i++){
oHomeContTabHead[i].className="HomeContTabHead";
oHomeGroup1[i].className="HomeGroup1";
}
oHomeContTabHead[index].className="HomeContTabHead headSelect";
oHomeGroup1[index].className="HomeGroup1 contentSelect";
}

~~~~~~~