首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js中上拉菜单有关问题了

2012-09-12 
js中下拉菜单问题求助了由于刚学js,不少例子中语句看不明白,向各位请教了。js代码中注有?????号的地方HTML

js中下拉菜单问题求助了
由于刚学js,不少例子中语句看不明白,向各位请教了。js代码中注有?????号的地方

HTML code
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript Sample</title><style type="text/css"><!--#mainNav {    position: absolute;    top:2px;    height:30px;    width:800px;}.mainItem {    position: absolute;    top:3px;    height:27px;    width:74px;    padding:10px 0px;    margin:0px;    text-align:center;    font-size:13px;    background-image: url(images/tab1.gif);    background-repeat:repeat-x;}.subItemNav {    position: absolute;    top: 30px;    left: 0px;    width: 100%;    height: 20px;    padding: 2px 0px 0px 100px;    visibility: hidden;    background-color:#61B38B;}.subItemNav a:link, .subItemNav a:visited {    font-size: 80%;    color: #ffffff;}.subItemNav a:hover {    color: #cccccc;}</style></head><body onmousemove="closeAllSubItem(event);"><div id="headerNav">      <div id="mainNav">                <div id="mainItem1" class="mainItem"                         onmouseover="displaySubItem(this);">开发王</div>                <div id="mainItem2" class="mainItem"                         onmouseover="displaySubItem(this);">最佳拍档</div>                <div id="mainItem3" class="mainItem"                         onmouseover="displaySubItem(this);">Flash</div>                <div id="mainItem4" class="mainItem"                         onmouseover="displaySubItem(this);">简体中文</div>                <div id="mainItem5" class="mainItem"                         onmouseover="displaySubItem(this);">繁体中文</div>                <div id="mainItem6" class="mainItem"                         onmouseover="displaySubItem(this);">其它语言</div>      </div>          <div id="subMenu1" class="subItemNav">        <a href="#">HTML</a> |         <a href="#">CSS</a> |         <a href="#">JavaScript</a> |         <a href="#">ASP</a> |         <a href="#">ASP.NET(VB)</a> |         <a href="#">ASP.NET(C#)</a> |         <a href="#">JSP</a> |         <a href="#">PHP</a>      </div>      <div id="subMenu2" class="subItemNav">        <a href="#">HTML/CSS/JavaScript</a> |         <a href="#">ASP</a> |         <a href="#">ASP.NET(VB)</a> |         <a href="#">ASP.NET(C#)</a> |         <a href="#">JSP</a> |         <a href="#">PHP</a>      </div>      <div id="subMenu3" class="subItemNav">        <a href="#">动画王</a> |         <a href="#">开发王</a> |         <a href="#">FMS</a> |         <a href="#">Flash Player:The Missing Manual</a> |         <a href="#">ASP.NET for Flash</a> |         <a href="#">ASP for Flash</a> |         <a href="#">JSP for Flash</a> |         <a href="#">PHP for Flash</a>      </div>           <div id="subMenu4" class="subItemNav">        <a href="#">some link</a> |         <a href="#">some link</a>       </div>      <div id="subMenu5" class="subItemNav">        <a href="#">some link</a> |         <a href="#">some link</a>       </div>      <div id="subMenu6" class="subItemNav">        <a href="#">some link</a> |         <a href="#">some link</a>       </div>     </div><br /><br /><br /><br /><script type="text/javascript">// =========================[01]=========================// 初始化,// 变量totalItems表示共有多少个主菜单项var totalItems = 6;function init(){    for (var i=1; i<= totalItems; i++){      // 获取所有子菜单项div元素,并设置其样式      var oSubItem = document.getElementById("subMenu"+i);//注意括号中获取不同子菜单div的做法      oSubItem.style.visibility = "hidden"                    //默认开始时全部子菜单都是隐藏的      // 获取所有主菜单项div元素,并设置其样式,主要就是初始化定位      var oMainItem = document.getElementById("mainItem"+i);//注意括号中获取不同主菜单div的做法      oMainItem.style.left = 74*i+"px";                        //设置主菜单初始状态的样式,注意相间同样距离的不同项的设置74*i,其中i是项目顺序。   }}init();// =========================[02]=========================// 鼠标指针移到主菜单项上方,触发该函数// 该函数重新设置主菜单项和子菜单项function displaySubItem(theobj){   for (var i=1; i<= totalItems; i++){     //   var oSubItem = document.getElementById("subMenu"+i);//获取各个子菜单项        这个注释掉也行???????    //  oSubItem.style.visibility = "hidden";                这个设置隐藏的样式我觉得没必要了,初始是隐藏的,新样式在后面几句设置??????????      var oMainItem = document.getElementById("mainItem"+i);      oMainItem.style.backgroundImage = "url(images/tab1.gif)";   }   var mainItemIndex =                   theobj.getAttribute("id").toString().substring(8);//分别是获取属性函数,返回字符函数,提前字符函数(start,stop)                                                                               ////  var oSubItem = document.getElementById("subMenu"+mainItemIndex);            ////stop可省略。这两句话怎么解析呢????什么意思呢?126中的有何不同呢?   oSubItem.style.visibility="visible";                    //显示子菜单行  theobj.style.backgroundImage = "url(images/tab2.gif)";//改变主菜单项的背景}                // =========================[03]=========================// 鼠标指针移动时,触发该函数// 注意对象变量scopeY用于定义垂直方向上的范围,这里是从5-60// 表示主菜单项和子菜单项的范围// 该函数检查鼠标指针是否超出这个范围,从而重新设置子菜单项function closeAllSubItem(event){   var scopeY = {top:5,bot:60};   window.status=event.clientY;   if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){       for (var i=1; i<= totalItems; i++){         var oSubItem = document.getElementById("subMenu"+i);         oSubItem.style.visibility = "hidden";      }     }}</script></body> 



[解决办法]
var mainItemIndex = //设置mainItemIndex变量等于
theobj.getAttribute("id").toString().substring(8) //获取 theobj的id名称并转换成字符串,最后取字符串的第7位及以后的所有字符(因为是从0算起的,详情查百度)。
var oSubItem = document.getElementById("subMenu"+mainItemIndex);//其实就是获取ID,只不过动态获取。换句话就是mainItemIndex是会变化的。

热点排行