前端 —— 原生JS -- tab切换卡--小demo

用原生JS写一个在页面中经常用的效果-----tab切换卡。非query。

思路：

1、获取元素集合

2、为每个li添加点击事件

3、点击时：
            li元素----- 1、全部删除：选中时样式 。全部删除需要再次循环，
                            2、当前元素添加：选中时样式
            div.item-- 3、当前li元素对应的div显示。其他隐藏

代码中，在获取 当前li所对应的div的下标时，有两个写法。

先看css文件：

.tabNav{
	width: 600px;
	height: 300px;
	background: #E1FFFF;
	border: 1px solid #556B2F
}
#tab_menu{
	height: 40px;
	background: #98FB98;
}
#tab_menu ul li{
	float: left;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	border-right: 1px solid #000;
	cursor: pointer;
}
#tab_menu ul li:last-child{
	border-right: none;
}
#tab_menu ul li.licurrent{
	background: #000000;
	color: #FFF;
}
.tab_item {
	width: 500px;	
	display: none;	
}
.current{
	display: block;
	background: #F0E68C;
	padding: 50px;
	height: 160px;
}

html代码：