原生js超短代码量开发标签页功能

前端标签页效果大家已经见怪不怪了，作为一个新手通过已学的部分，自我感觉最短的js代码搞定标签页效果；

<切换> <上浮> <边框一体> <等> 都可实现；

上代码~

HTML 代码：

	<div id="dv_box">
		<ul>
			<li onmouseover="xianshi('1','2','10','28')" onmouseout="xianshi('1','1','0','18')" id="x1">项目1</li>
			<!--函数中四个参数：
				参数1：1 = 传递ID，但为了省略代码量，通过参数值不同达到较少代码对多个ID的控制；
				参数2: 2 = z-index属性值，控制图层的显示，达到切换效果；
				参数3：10 = 标签上浮效果，应用在定位后的bottom上，达到上浮10px效果；
				参数4：28 = 标签上浮后的高度，因需要边框一体化效果，所以需要标签盖住内容，所以当上浮后要改变标签高度；
			-->
			<li onmouseover="xianshi('2','2','10','28')" onmouseout="xianshi('2','1','0','18')" id="x2">项目2</li>
			<li onmouseover="xianshi('3','2','10','28')" onmouseout="xianshi('3','1','0','18')" id="x3">项目3</li>
			<li onmouseover="xianshi('4','2','10','28')" onmouseout="xianshi('4','1','0','18')" id="x4">项目4</li>
		</ul>
		<div id="dv1" style="z-index:2;">项目1内容</div>
		<div id="dv2">项目2内容</div>
		<div id="dv3">项目3内容</div>
		<div id="dv4">项目4内容</div>
	</div>

JS代码：

  <script type="text/javascript">
	function xianshi(id,bk,bg,ht){
		for(var i=1;i<=4;i++){
			document.getElementById("dv"+i).style.zIndex = "0";//遍历所有标签内容图层为0；
			document.getElementById("x"+i).style.borderBottomColor = "#000";//遍历所有标签底部边框颜色为初始值#000；
		}
		document.getElementById("dv"+id).style.zIndex = bk;
		document.getElementById("x"+id).style.borderBottomColor = "#fff";
		document.getElementById("x"+id).style.bottom= bg+"px";
		document.getElementById("x"+id).style.height= ht+"px";
	}

  </script>

完事，收工~