DOM的案列

模拟hover

鼠标悬浮在哪个button上,该button变成绿色背景。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        button{
            width:100px;
            height:25px;
        }
        button.active{
            background-color:green;
        }
    style>
head>
<body>
<button>按钮1button>
<button>按钮2button>
<button>按钮3button>
<button>按钮4button>
<button>按钮5button>

<script>
    oBtns = document.getElementsByTagName('button');
    window.onload = function(){
        for(i=0; i < oBtns.length; i++){
            oBtns[i].onmouseover = function(){
            	// 重要:排他思想,先把所有的按钮的className设置为空,然后把(this)当前这个按钮的className设置为active
                for(j=0; j<oBtns.length; j++){
                    this.className = '';
                }
                this.className = 'active';
            }

            oBtns[i].onmouseout = function(){
                this.className = '';
            }
        }
    }
script>
body>
html>

tab栏选项

需求:鼠标放在上面li标签上,li标签变色(添加类),对应下面p也显示出来(添加类)。




	
	Title
	


首页内容

新闻内容

照片内容

效果:
DOM的案列_第1张图片
可将var的变量声明修改为let声明来解决变量提升问题,变为局部变量。

你可能感兴趣的:(js,javascript,前端,javascript,js)