如何利用JS实现CSS中的HOVER效果以及选项卡的制作

最新推荐文章于 2024-10-30 18:24:25 发布

weixin_30861797

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量531

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qiutaotao/p/5496179.html

版权

在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.οnlοad= 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].οnclick= 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>