(选项卡)tag内容切换

时间:2022-01-31 06:28:01

最近在重温js,听取大神的意见,要把知识做一下笔记。

真的把自己写的代码表述出来真的有点难啊啊,语文贼不好

这是第一条博客哈哈哈。

没错本人为前端小白。。。。。。。请多多指教

点击一个按钮,相应的内容显示,效果图如下

(选项卡)tag内容切换 (选项卡)tag内容切换

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width: 100px;height: 100px;background: yellowgreen; display: none;}
input{background: white;}
</style>
<script>
window.onload=function(){

var onbtn=document.getElementsByTagName('input');

                               //返回指定标签名的所有子元素集合,我比较喜欢说是获取标签名的所有子元素集合input,

var ondiv=document.getElementsByTagName('div');
var i=0;
for(i=0; i<onbtn.length;i++)
{
onbtn[i].index=i;
onbtn[i].onclick=function()
{
for(i=0;i<onbtn.length;i++)
{
onbtn[i].style.background="white";
ondiv[i].style.display="none";//先清空样式

}
this.style.background="cornflowerblue";//显示对应点击的样式更改
ondiv[this.index].style.display='block';//对应的内容框显示
}
}
}
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">1111</div>
<div>2222</div>
<div>3333</div>

</body>
</html>