js的选项卡

思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循还。

js相关代码:

window.onload = function() {
var oli = document.getElementById('ul1').getElementsByTagName('li');
var odiv = document.getElementById('content').getElementsByTagName('div');
for(var i=0;i<oli.length;i++){
oli[i]._shuxing=i
oli[i].onclick=function(){
for(var i=0;i<oli.length;i++){
oli[i].className='';
odiv[i].style.display='none'

}
this.className="red";
odiv[this._shuxing].style.display="block";


}

}

猜你喜欢

转载自blog.csdn.net/weixin_39041271/article/details/73246040