最近在重温js,听取大神的意见,要把知识做一下笔记。
真的把自己写的代码表述出来真的有点难啊啊,语文贼不好
这是第一条博客哈哈哈。
没错本人为前端小白。。。。。。。请多多指教
点击一个按钮,相应的内容显示,效果图如下
<!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>