如何利用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">111div>
<div>222div>
<div>333div>
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>
 
 
 

 

转载于:https://www.cnblogs.com/qiutaotao/p/5496179.html

你可能感兴趣的:(如何利用JS实现CSS中的HOVER效果以及选项卡的制作)