<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>tab切换</title>
<style type="text/css">
body,
ul {
margin: 0;
padding: 0;
font-family: "microsoft yahei";
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
.tabBox {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid #ccc;
border-right: none;
left: 50%;
margin-left: -150px;
margin-top: 100px;
}
.boxTitle ul li {
float: left;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.boxTitle ul li.active {
font-weight: bold;
border-bottom: none;
}
.tabBox .boxTitle ul li a {
color: #000;
display: block;
}
.tabBox .box {
width: 300px;
height: 70px;
border: 1px solid #ccc;
box-sizing: border-box;
border-top: none;
border-left: none;
border-bottom: none;
overflow: hidden;
}
.hide {
display: none;
}
.box ul li {
font-size: 12px;
float: left;
width: 149px;
height: 35px;
line-height: 35px;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
}
.box ul li a {
color: #8B8378;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul .index-c {
width: 300px;
}
.box ul .index-c a {
color: #CC0000;
}
.cb {
clear: both;
}
.outer {
width: 100%;
height: 100%;
position: relative;
margin-left: 50px;
margin-top: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="tabBox">
<div class="boxTitle">
<ul>
<li class="active"><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
<div class="cb"></div>
</div>
<div class="box">
<div class="show">
<ul>
<li class="index-c"><a href="#">[热门]2015天猫双11打破9项世界吉利斯记录</a></li>
<div class="cb"></div>
<li><a href="#">明年一月将举办"年货节"</a></li>
<!-- <li><a href="#">新一代好友互动"来往</a></li>-->
<li><a href="#">最受赞赏公司阿里折桂</a></li>
</ul>
<div class="cb"></div>
</div>
<div class="hide">
<ul>
<li><a href="#">10月新规发布汇总</a></li>
<li><a href="#">广告法禁用语大全</a></li>
<li><a href="#">邮费争议问题汇总</a></li>
<li><a href="#">炒信规则调整意见反馈</a></li>
</ul>
<div class="cb"></div>
</div>
<div class="hide cb">
<ul>
<li><a href="#">阿里建商家全链路服务</a></li>
<li><a href="#">个性化的消费时代来临</a></li>
<li><a href="#">跨境贸易是中小企业机</a></li>
<li><a href="#">美妆行业虚假消息管控</a></li>
</ul>
<div class="cb"></div>
</div>
<div class="hide cb">
<ul>
<li><a href="#">防信息泄露,保钱包安全</a></li>
<li><a href="#">警企联手打击网络犯罪</a></li>
<li><a href="#">阿里安全四大技术创新</a></li>
<li><a href="#">二维码扫描有风险</a></li>
</ul>
<div class="cb"></div>
</div>
<div class="hide cb">
<ul>
<li><a href="#">公益机构开店教程</a></li>
<li><a href="#"> 中国网络捐赠研究报告</a></li>
<li><a href="#">公益广告设计有奖征稿</a></li>
<li><a href="#"> 公益宝贝买家发票索取</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
var div_ul_li = $("div.boxTitle ul li");
div_ul_li.bind("mouseover", function() {
$(this).addClass("active").siblings().removeClass("active");
var index = div_ul_li.index(this);
var hide = $("div.box>div");
hide.eq(index).show(100).siblings().hide();
hide.eq(index).find("a:eq(0)").css("color", "#CC0000");
})
})
</script>
</body>
</html>