<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0;
padding: 0;
}
#div0{
width:520px;
margin-top: 50px;
margin-left: 50px;
}
.div1{
height:34px;
line-height:34px;
border: 1px solid #dbdee1;
background: url(http://i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png) 0 -33px repeat-x;
border-left:0px;
}
.div1_1>span{
float:left;
height: 33px;
font-size:16px;
font-family:"Microsoft YaHei","微软雅黑";
padding:0 13px;
border-left:1px solid #dbdee1;
border-right:1px solid #dbdee1;
}
.spselect{
line-height:28px;
border-top:3px solid #ff8400;
background-color:#fff;
margin-bottom:-1px;
padding:0 12px;
}
.divselect{
display: block;
}
.divnoselect{
display: none;
}
.time{
float:right;
padding-right:10px;
}
.div2 div{
height:100px;
}
.div2 div li{
padding-left: 10px;
list-style:none;
background: url(http://i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;
overflow: hidden;
line-height: 26px;
}
a:hover{
color: #ff8400;
}
.div2 a:hover {
text-decoration: underline;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
var divs = $("#div2>div");
$("#div1_1>span").mouseover(function () { //鼠标事件
//$(this).addClass("spselect");//添加类在当前对象
var index = $(this).index(); //$(this).index()代表当前对象索引
//eq()函数用于获取当前jQuery对象所匹配的元素中指定索引的元素，
$(this).addClass("spselect").siblings().removeClass();//添加类在当前对象 移除同级元素类
divs.hide().eq($('#div1_1>span').index(this)).show();
});
$("#div1_1>span").mouseout(function () {
$(this).removeClass("spselect");
});
});
</script>
</head>
<body>
<!--大div内容和标题区-->
<div id="div0">
<div class="div1">
<div class="div1_1" id="div1_1">
<span class="sp spselect"><a>新闻</a></span>
<span class="sp"><a class="a2">看河南</a></span>
<span class="sp"><a>看世界</a></span>
</div>
<span class="time">2017.10.16</span>
</div>
<div style="height:20px"></div>
<div class="div2" id="div2">
<div class="divselect">
<ul>
<li><a>xxx主持中共中央党外人士座谈会</a></li>
<li><a>“我们的自信”文化篇——中华之魂</a></li>
<li><a>十八次党代会十八座里程碑 解决了啥难题</a></li>
</ul>
</div>
<div class="divnoselect">
<ul>
<li><a>河南本周最低气温降至7℃ 周三前多阴雨天气</a></li>
<li><a>“五星级”菜市场亮相郑州 投资800万装修豪华(组图)</a></li>
<li><a>河南构建全产业链现代物流强省 三年转型发展规划出台</a></li>
</ul>
</div>
<div class="divnoselect">内容3</div>
</div>
</div>
</body>
</html>
