如上图，需要做到鼠标移入对应的标题，标题高亮，然后标题对应的内容显示。
setAttribute() 是用于设置自定义属性的方法,有两个参数，第一个是属性名，第二个是属性值，添加时必须用引号括起来.
比如.setaAttribute("index"，i)意思把这个i保存成index,要用的时候可以获取到
getAttribute 方法用于拿到设置的自定义属性的属性值，唯一一个参数就是搜索的自定义属性名（也要用引号包起来）：
onmouseenter和onmouseover都是鼠标移入，但是如果是移入ul下面有多个li,onmouserenter可以阻止事件冒泡，不用事件委托的方式来处理同时移入多个li
ommouseover，意思移入ul就是同时移入了多个li，需要用事件委托来处理。e.target
<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;
}
/* 给li加个类 */
#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>
// outer里面有2个标题，现在鼠标移入哪一个，哪一个就高亮
// 也就是加一个class="current"
// Tab下面的3个li
var tabLiArray = document.querySelectorAll("#tab li");
// tab
var tabUl = document.getElementById("tab");
// 找到content下面所有的ul*(页面上所有内容)
var ulArray = document.querySelectorAll("#content ul");
// 鼠标移入tabul
// 鼠标移入的另一种方法，是如果用onmouseenter,可以阻止事件冒泡，不用事件委托
// tabUl.onmouseover = function (e) {
// // 要移入到对应的li,(e.target)才高亮，所以用事件委托e.target
// for (var i = 0; i < TabLiArr.length; i++) {
// // 因为在样式里面加了current代表高亮
// // 先把所有高亮清空
// TabLiArr[i].className = "";
// }
// // 鼠标移入对应的li才高亮
// e.target.className = "current";
// };
# 本文用的是这个方法
for (var i = 0; i < tabLiArray.length; i++) {
// 要做到鼠标移入标题，标题高亮，内容也显示
tabLiArray[i].onmouseenter = function () {
for (var i = 0; i < tabLiArray.length; i++) {
// 先把所有的高亮都清除
tabLiArray[i].className = "";
// 给标题下面的每一个li添加一个属性,把这个i保存成index，下面就就可以获取到
tabLiArray[i].setAttribute("index", i);
// 先把所有内容都隐藏
ulArray[i].style.display = "none";
}
// 给鼠标移入的添加类，代表高亮
this.className = "current";
// 上面定义了setAttribute,这里用getAttribute来获取
ulArray[this.getAttribute("index")].style.display = "block";
};
}
</script>
</html>
