原生js实现tab栏切换-前端特效-个人博客随笔文章类网站pbootcms模板(自适应手机端) 前端开发博客网站源码下载

使用原生js制作页面效果时有更好的兼容性，因此我将在随笔中更新原生实现各种js效果的代码，以帮助需要使用原生js制作网站的前端工程师们更好的进行网站建设。

每篇文章都尽量以较短的篇幅以及清晰明确的内容让大家更好的理解原生js如果制作各种效果。

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

#all{

width: 600px;

margin: 50px auto;

height: 500px;

border: 2px red solid;

position: relative;

}

#all #tab li{

list-style: none;

float: left;

width: 200px;

height: 50px;

line-height: 50px;

text-align: center;

font-size: 30px;

font-weight: 700;

}

#all .con{

width: 580px;

height: 430px;

position: absolute;

top: 60px;

left: 10px;

display: none;

}

</style>

window.onload = function(){

var tab = document.getElementById("tab");

var lis = tab.getElementsByTagName('li');//获得标签li的数组

var cons = document.getElementsByClassName('con');//获得下面内容div的数组

for(var i=0;i<lis.length;i++){

lis[i].num = i;//给对象添加属性，赋值用于标记

lis[i].onmousemove = function(){

//div先全部隐藏

for(var j = 0;j<cons.length;j++){

cons[j].style.display = 'none';

}

//显示与鼠标所在li对应位置的div

cons[this.num].style.display = 'block';

}

</script>

</head>

<body>

</ul>

</div>

</body>

</html>

原生js实现tab栏切换

联系方式

热门文章随笔推荐

关键字搜索

关于

原生js实现tab栏切换

联系方式

热门文章 随笔推荐

关键字搜索

关于

热门文章随笔推荐