1.鼠标移入对应的li，li高亮，其他熄灭
2.鼠标移入li时候，li所对应的ul板块显示，其他ul板块隐藏（难点在于二者建立联系，参考注释部分）
移入高亮，重点看script部分里面的注释
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易选项卡</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 Tahoma;
}
#outer {
width: 450px;
margin: 10px auto;
}
#tab {
overflow: hidden;
zoom: 1;
background: #000;
border: 1px solid #000;
}
#tab li {
float: left;
color: #fff;
height: 30px;
cursor: pointer;
line-height: 30px;
list-style-type: none;
padding: 0 20px;
}
#tab li.current {
color: #000;
background: #ccc;
}
#content {
border: 1px solid #000;
border-top-width: 0;
}
#content ul {
line-height: 25px;
display: none;
margin: 0 30px;
padding: 10px 0;
}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">政治</li>
<li>八卦</li>
<li>时事</li>
</ul>
<div id="content">
<ul style="display:block">
<li class="bold-item">
<span class="dot"></span>
<a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1315399.shtml"
mon="ct=1&a=2&c=top&pn=1" target="_blank">中央批准：免去沈晓明上海市委常委、委员职务</a>
</li>
<li>
<a href="http://china.huanqiu.com/article/2016-09/9479605.html?from=bdwz"
mon="ct=1&a=2&c=top&pn=2" target="_blank">河北省委常委、政法委书记董仚生辞去副省长职务</a>
</li>
<li>
<a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1314362.shtml"
mon="ct=1&a=2&c=top&pn=3" target="_blank">公安局纪委书记装GPS跟踪区委书记 获刑3年半</a>
</li>
<li>
<a href="http://world.huanqiu.com/article/2016-09/9480050.html?from=bdwz"
mon="ct=1&a=2&c=top&pn=4" target="_blank">美总统大选丑闻不断：特朗普曝多次挪用其基金会资金</a>
</li>
<li>
<a href="http://news.cyol.com/content/2016-09/23/content_14088428.htm"
mon="ct=1&a=2&c=top&pn=5" target="_blank">六部门：电信网络诈骗犯罪人员10月31日前要主动投案</a>
</li>
<li>
<a href="http://world.huanqiu.com/article/2016-09/9480301.html?from=bdwz"
mon="ct=1&a=2&c=top&pn=6" target="_blank">外媒称杜特尔特10月中旬将访华 中方：期待早日成行</a>
</li>
</ul>
<ul>
<li class="bold-item">
<span class="dot"></span>
<a href="http://ent.ifeng.com/a/20160923/42689367_0.shtml?_zbs_baidu_news"
mon="ct=1&a=2&c=top&pn=25" target="_blank">陈乔恩长文悼念乔任梁：对不起没多关心你</a>
</li>
<li>
<a href="http://china.huanqiu.com/article/2016-09/9476618.html?from=bdwz"
mon="ct=1&a=2&c=top&pn=26" target="_blank">媒体揭秘燕城监狱：内部究竟是什么样子(图)</a>
</li>
<li>
<a href="http://d.youth.cn/shrgch/201609/t20160923_8684548.htm"
mon="ct=1&a=2&c=top&pn=27" target="_blank">贵州双胞胎患病眼睛似外星人：无眼睑瞳孔上翻</a>
</li>
<li>
<a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1314292.shtml"
mon="ct=1&a=2&c=top&pn=28" target="_blank">初中生写作文字迹潦草 老师留评语“呆B”</a>
</li>
<li>
<a href="http://shehui.china.com.cn/2016-09/23/content_39359541.htm"
mon="ct=1&a=2&c=top&pn=29" target="_blank">赌徒为还债拍黑砖抢钱 谎称私人恩怨从容逃脱</a>
</li>
<li>
<a href="http://xinwen.eastday.com/a/160923071129828.html" mon="ct=1&a=2&c=top&pn=30"
target="_blank">陕西大三女生轻信"公检法查洗钱案" 被骗31万元</a>
</li>
</ul>
<ul>
<li class="bold-item">
<a href="http://xinwen.eastday.com/a/160923071245450.html">深圳二手房卖主悔约不服判决 纠集60余人冲击法院</a>
</li>
<li>
<a href="http://xinwen.eastday.com/a/160923142928053.html">中国劳动保障蓝皮书:今明两年全球失业率将上升</a>
</li>
<li>
<a href="http://news.cyol.com/content/2016-09/23/content_14087297.htm"
mon="ct=1&a=2&c=top&pn=9">纽约截获450万美元象牙及制品 系当地史上最大</a>
</li>
<li>
<a href="http://news.ifeng.com/a/20160923/50013009_0.shtml?_zbs_baidu_news"
mon="ct=1&a=2&c=top&pn=10">赖德荣被免广西政协副主席职务 此前被降为科员</a>
</li>
<li>
<a href="http://china.huanqiu.com/article/2016-09/9479905.html?from=bdwz "
mon="ct=1&a=2&c=top&pn=11">面对人大常委会质询，南昌市长向500多万市民道歉</a>
</li>
<li>
<a href="http://china.huanqiu.com/article/2016-09/9480409.html?from=bdwz"
mon="ct=1&a=2&c=top&pn=12">中央网信办、民政部联合发文 加强网信社会组织建设</a>
</li>
</ul>
</div>
</div>
</body>
<script>
// 鼠标移入第一个ul板块里面的li的时候，先让全部高亮隐藏，鼠标移入的高亮
// 先找到第一个ul板块下面所有的li
var tabLiArray = document.querySelectorAll('#tab li')
// 第一个ul板块
var ulOne = document.getElementById('tab')
// 第二个ul板块所有的ul
var ulTwoArr = document.querySelectorAll('#content ul')
// 鼠标移入第一个ul里面所有的li的时候
for (var i = 0; i < tabLiArray.length; i++) {
tabLiArray[i].onmouseenter = function () {
// 所有的li的高亮熄灭
// 这里用到i，还需要再循环遍历得到
for (var i = 0; i < tabLiArray.length; i++) {
tabLiArray[i].className = ""
// 给指定节点添加一个属性，方便查找到
// 这样每一个li标签里面就有了index=1 index=2 index=3
tabLiArray[i].setAttribute('index', i)
// 第二个ul板块里面所有的ul先隐藏
ulTwoArr[i].style.display = 'none'
}
// 移入的高亮
this.className = 'current'
// 第二个板块里面隐藏的ul，
// this.getAttribute('index') 这里就得到了一个数字，这样就和前面的板块建立了联系
ulTwoArr[this.getAttribute('index')].style.display = 'block'
}
}
</script>
</html>
