论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2006-07-11 16:23 |只看该作者 |倒序浏览

这几天学习JS。在这里问了许多问题。感谢大家的热心帮助。

我当时的想法是做一个菜单鼠标事件。
1.菜单中不使用ID。目的是为了皮肤改用起来方便。避免ID重复，或者取错名。
2.菜单中，点哪个哪个有背景。

问了许多朋友。都说应该用ID，及遍历tags的方法来实现。就是循环getElementById(*)的方法。
我试着做一个，因为每次点击，都要循环一遍节点，感觉着很不舒服。
今天看语法，见到event的用法，感觉这正是我所需要的。试着做一个菜单效果。

原理跟我当时的设想一样。
1.使用event获取接收onclick事件的tags。
2.对该tags进行css控制。
　（并给该tags添加 id 。目的是清除上次tags的css效果时，不必循环。）

　　（注：这句思路，并不支持FirFox。）

我还是JS初级学生。所采用的方法及效果并不怎样。
在这里将脚本贴出来，请大家指点，向大家学习！

脚本如下：

<html>
<head>
<title>Qtian菜单学习</title>
<style type=text/css>
*{font-size:12px;margin:0px;padding:0px}
a{height:20px;padding-top:3px;}
.menu{width:180px;margin:10px;text-align:left;list-style-type: none;}
.menu a {padding-left:20px;overflow:hidden;display: block;color:#990;height:22px;}
.menu a:hover {color:#ff0;background-color:#E3E9FB;}
.menu ol {list-style:none;background-color:#0F42A6;border-bottom:#FFF 1px solid;}
.menu ol a:hover{background-color:#0F42A6;}
.menu li {list-style:none;background-color:#CAD7F7;border-bottom:#FFF 1px solid;}
.menu li a:hover{background-color:#E3E9FB;}
.show{overflow:visible;}
.close{overflow:hidden;height:21px;}
#now_menu_id{background-color:#eee}
</style>
</head>
<div class=menu onclick="menu(event)">
<ol class="close"><a href="#" >大栏目一</a>
<li><a href="#">栏目0</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
</ol>
<ol class="close"><a href="#" >大栏目二</a>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
<li><a href="#">栏目5</a></li>
</ol>
</div>
-------------
<div class=menu onclick="menu(event)">
<ol class="close"><a href="#" >大栏目一</a>
<li><a href="#">栏目0</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
</ol>
<ol class="close"><a href="#" >大栏目二</a>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
<li><a href="#">栏目5</a></li>
</ol>
</div>
<script>
var show="show" //menu显示时的css
var close="close" //menu关闭时的css
var bg="now_menu_id" //menu点击后的css
re_menu()
function menu(e){
e = e || window.event;
var targ = e.srcElement || e.target;
var p=targ.parentNode.nodeName
var tags_index=targ.sourceIndex;//不兼容MF
//使兼容MF
if (tags_index==undefined){
var x = document.getElementsByTagName('*');
for ( var i = 0 ; i < x.length; i++){
tags_index=i
if(x[i]==targ)break;
}
}
if(targ.nodeName!="A")return;
if(p=="LI"){
if(document.getElementById(bg))document.getElementById(bg).id="";
targ.id=bg;
create_cookies("s_menu",tags_index);
}else if(p=="OL"){
targ=targ.parentNode
targ.className=targ.className==close?show:close;
create_cookies("b_menu",tags_index);
}
}
//还原
function re_menu(){
var b_menu=get_cookies("b_menu")
if(b_menu!=false){
b_menu=b_menu.split(",")
for(var i=1;i<b_menu.length-1;i++){
document.all(b_menu[i]-1).className=show;
}
}
var s_menu=get_cookies("s_menu")
if(s_menu!=false){
s_menu=s_menu.split(",")
if(s_menu[1]-0>0)document.all(s_menu[1]-0).id=bg;
}
}
function create_cookies(name,v){
var t=get_cookies(name)
var v=","+v+",";
t=(t==false || name=="s_menu")?v:((t.indexOf(v)>-1)?(t.replace(v,",")):(t.substring(0,t.length-1)+v))
document.cookie=name +"="+t;
}
function get_cookies(name){
t=document.cookie
if(t.length<1)return false;
if(t.indexOf(name+"=")<0)return false
t=t.substring(t.indexOf(name+"=")+name.length+1,t.length)
if(t.length<1)return false;
var end=t.indexOf(";")==-1?t.length:t.indexOf(";")
t=t.substring(0,end)
return t;
}
</script>