如何利用JS实现CSS中的HOVER效果以及选项卡的制作
在CSS中hover是指鼠标移入和移出两个事件，利用CSS实现这个效果非常的简单，可是如果放在JS中，我们就必须解析成两个事件：onmouseover和onmouseout。做起来的话相对于CSS略显复杂，这里我便分享一下我利用JS实现此效果的过程，这是我在制作选项卡时用到的，因此大家也可以看看选项卡是怎么制作的。
首先在HTML中设置三个input按钮和三个div(选项卡的内容)：代码如下：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input{
background: white;}
.yellow{background: yellow}
div{width:200px;height:200px;background: red;display: none}
</style>
</head>
<body>
<input class="white" type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block">111</div>
<div>222</div>
<div>333</div>
</body>
此时你会发现页面上有三个按钮的一个DIV，我们就是利用选中一个按钮，一个div的display变为block,其他的变成none来实现的。代码如下：
<script type="text/javascript">
window.onload= function () {
var but=document.getElementsByTagName("input");
var odiv=document.getElementsByTagName("div");
for(var i=0;i<but.length;i++){
but[i].index=i;
but[i].onclick= function () {
for(var i=0;i<but.length;i++){
but[i].className="";
odiv[i].style.display="none";
}
this.className="yellow";
odiv[this.index] .style.display="block";
}
}
};
</script>
