                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

不知道哪里出问题了？

function $(id){
	return typeof id=='string'?document.getElementById(id):id;
	}
	window.onload=function(){
		//获取鼠标滑过或点击的标签和要切换内容的元素
		var titles=$("notice-tit").getElementsByTagName("li")
		var divs=$("notice-con").getElementsByTagName("div")
		//alert(titles.length);
		if(titles.length!=divs.length)
		{return;}
		//遍历titles下所有的li
		for(var i=0;i<titles.length;i++)
		{
			titles[i].id=i;
			titles[i].onmouseover=function(){
				for(var j=0;j<titles.length;j++)
				 {titles[j].className="";
				  divs[j].style.dislay="none";}
				this.className="select";
				divs[this.id].style.display="block";
				}
		}
	}

qq_梦里_0

2016-09-27

源自：Tab选项卡切换效果 1-3

关注问题我要回答

770

操作

收起

2 回答

qq_梦里_0 提问者
2016-09-27

显示的不对，并且鼠标滑动第一次的时候下面div还有变化，第二次的时候就没反应了。

0 回复有任何疑惑可以回复我~

收起回答

qq_梦里_0 提问者
2016-09-27

/* CSS Document */
*{margin:0;padding:0;list-style:none;font-size:12px;}
.notice{width:298px;height:98px;margin:10px;border:1px solid #eee;overflow:hidden;}
.notice-tit{height:27px;position:relative;background:#f7f7f7}
.notice-tit ul{position:absolute;width:301px;left:-1px;}
.notice-tit ul li{float:left;width:58px;height:26px;line-height:26px;text-align:center;overflow:hidden;background:#fff;border:1px solid #eee;}
.notice li a:link,.notice li a:visited{text-decoration:none;color:#000000;}
.notice li a:hover{color:#FF9900;}

.notice li.select{bCkground:#fff;
border-bottom-color:#FFFFFF;border-left:1px solid #eee;border-right:#eee;}

.notice-con .mod{margin:10px 10px 10px 19px;}

.notice-con .mod ul li{float:left;width:134px;height:25px;overflow:hidden;}

慕课网总说我的html中包含不当的用于，所以没法粘贴