选项卡

最新推荐文章于 2024-09-10 14:15:01 发布

lichongmin1998

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量261

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/lichongmin1998/article/details/53796965

版权

选项卡思想

每一个按钮（input）对应一份内容

简单的选项卡

#box div,#box2 div,#box3 div{

  width: 200px;

  height: 200px;

  background: yellow;

  line-height: 200px;

  text-align: center;

font-size: 50px;

  display: none;

}

.on{

background: red;

}

</style>

<script type="text/javascript">

function tab(name,sEv){

var oBox=document.getElementById(name);

var aBtn=oBox.getElementsByTagName('input');

var aDiv=oBox.getElementsByTagName('div')

}

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

aBtn[i].index=i;

aBtn[i][sEv]=function(){

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

aBtn[i].className='';

aDiv[i].style.display='none';

}

this.className='on';

aDiv[this.index].style.display='block';

}

}

}

window.οnlοad=function(){

tab('box','onclick');

tab('box2','onmouseover');

tab('box3','onmouseout');

}

</script>

html 的布局

<div id="box">

<input type="button" value="啊啊" class="on">

<input type="button" value="得到">

<input type="button" value="回家">

<div style="display: block;">1</div>

<div>2</div>

<div>3</div>

</div>

<div id="box2">

<input type="button" value="啊啊" class="on">

<input type="button" value="得到">

<input type="button" value="回家">

<div style="display: block;">1</div>

<div>2</div>

<div>3</div>

</div>

<div id="box3">

<input type="button" value="啊啊" class="on">

<input type="button" value="得到">

<input type="button" value="回家">

<div style="display: block;">1</div>

<div>2</div>

<div>3</div>