JavaScript的字符串中添加变量
for (var i=0; i<wLi.length; i++){
wLi[i].onmouseover = function(){
this.className = "navHover"+i;
}
wLi[i].onmouseout = function(){
this.className = "";
}
} 展开
js太麻烦了,涉及怎么传i进去函数里面,找了好久资料才找着,最好用还是jq我下面提供的资料都有,,隐藏的是jq实现的,你可以复制到你本地看看。。。
具体js实现后的效果如下:
然后代码如下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:normal 1em Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
a{ text-decoration:none; color:black;}
a:hover{ text-decoration:underline; color:red;}
#ull li{ border:1px solid red;}
.navHover{ background:#aaa;}
.navHover0{ background:#99F;}
.navHover1{ background:#ccc;}
.navHover2{ background:#f00;}
.navHover3{ background:#ff0;}
.navHover4{ background:#99d;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<ul id="ull">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script language="javascript">
var wLi = document.getElementById("ull").getElementsByTagName("li");
for(var i = 0; i < wLi.length; i++){
wLi[i].onmouseover = function(i){
return function(){
this.className = "navHover" + i;
}
}(i);
wLi[i].onmouseout = function(){
this.className = "";
};
}
// $(document).ready(function(){
// $("#ull li").hover(function(){
// var index = $("#ull li").index(this);
// $(this).addClass("navHover" + index);
// },function(){
// $(this).removeClass();
// });
//
// });
</script>
</body>
</html>
var classes = [/*要调用的样式数组*/];
li.on("mouseover",function(){
var random = ? //生成0--数组长度区间的随机数
$(this).addClass(classes[random]).siblings().removeClass(); //当前元素添加样式,同辈元素去掉样式
})