JS中这一行代码老是提示 缺少分号错误 这是为什么呢
饭太少787
2015-05-07 07:52
lis[i].onmouseout = fucntion(){ JS中这一行代码老是提示 缺少分号错误 这是为什么呢 ？
检查了很多遍 没有缺少分号 也没有中文状态下的标点符号！
老师帮忙看看
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="UTF-8"> -->
<meta name="description" content="小清新 文艺青年的聚集地">
<title>tab手动切换</title>
<link rel="stylesheet" href="tabcss.css">
<script src="tab.js" type="text/javascript"></script>
</head>
<body>
<div id="tab">
<div id="tab-tit">
<ul>
<li><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div id="tab-content">
<div id="content" style="display:block">
<ul>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">阿里2000万驰援灾区</a></li>
<li><a href="#">旅游宝让你边玩边赚钱</a></li>
<li><a href="#">多行跟进阿里信用贷款</a></li>
</ul>
</div>
<div id="content" style="display:none">
<ul>
<li><a href="#">[通知]滥发即将换新</a></li>
<li><a href="#">[通知]比特币严管啦</a></li>
<li><a href="#">[通知]禁发商品名录</a></li>
<li><a href="#">[通知]商品属性限制</a></li>
</ul>
</div>
<div id="content" style="display:none">
<ul>
<li><a href="#">[聚焦]金牌卖家再起航</a></li>
<li><a href="#">[功能]比特币严管啦</a></li>
<li><a href="#">[话题]禁发商品名录</a></li>
<li><a href="#">[工具]商品属性限制</a></li>
</ul>
</div>
<div id="content" style="display:none">
<ul>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">阿里2000万驰援灾区</a></li>
<li><a href="#">旅游宝让你边玩边赚钱</a></li>
<li><a href="#">多行跟进阿里信用贷款</a></li>
</ul>
</div>
<div id="content" style="display:none">
<ul>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">阿里2000万驰援灾区</a></li>
<li><a href="#">旅游宝让你边玩边赚钱</a></li>
<li><a href="#">多行跟进阿里信用贷款</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>function $(id) {
return typeof id === 'string'?document.getElementById(id):id;
}
//页面加载时运行函数
window.onload = tab;
function tab() {
//设置定时器及索引
var timer = null;
var index = 0;
//取出标签及要切换的内容
var lis = $('tab-tit').getElementsByTagName('li');
var divs = $('tab-content').getElementsByTagName('div');
//给每个标签鼠标滑过的时候改变内容
for(i=0;i<lis.length;i++){
lis[i].id =i; //用来告诉滑过的是哪个li
lis[i].onmouseover = function() {
clearInterval(timer);
for(j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
//高亮显示当前页签
lis[this.id].className = 'select';
divs[this.id].style.display = 'block';
}
//鼠标离开也能自动切换
lis[i].onmouseout = fucntion(){
timer = setInterval(function(){
index++;
if(index>=lis.length){
index = 0;
}
for(j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
//高亮显示当前页签
lis[index].className = 'select';
divs[index].style.display = 'block';
},2000);
}
}
//设置定时器
timer = setInterval(function(){
index++;
if(index>=lis.length){
index = 0;
}
for(j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
//高亮显示当前页签
lis[index].className = 'select';
divs[index].style.display = 'block';
},2000)
}
body, ul, li, a {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
margin: 30px;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
a:link {
color: #000;
}
a:hover {
color: #f00;
}
.tab {
width:298px;
height: 98px;
border: 1px solid #e3e3e3;
}
.tab-tit {
position: relative;
height: 27px;
}
.tab-tit ul{
position: absolute;
width:301px;
left:-1px;
}
.tab-tit li {
border-bottom: 1px solid #e3e3e3;
float:left;
padding:0 1px;
overflow: hidden;
width:58px;
height:26px;
line-height: 26px;
text-align: center;
background: #c9c9c9;
}
.tab-tit li.select {
border-bottom: 0;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
padding: 0;
background: #fff;
font-weight: bold;
}
/* 内容部分 */
.tab-content ul{
overflow: hidden;
}
.tab-content .content{
margin: 10px 6px;
}
.tab-content ul li {
float: left;
overflow: hidden;
height: 25px;
width: 143px;
line-height: 25px;
}
1回答
-
- 兔老太
- 2015-06-04 17:22:26
lis[i].onmouseout = fucntion(){
function 不是 fucntion
Tab选项卡切换效果
65466 学习 · 573 问题
相似问题