关于下拉菜单HTML+CSS+JavaScript中JS出错在哪我看不懂
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/ecmascript" src="js/js2.js"></script> <link rel="stylesheet" href="css/17.css"> </head> <div id="ybl"> <ul> <li><a href="#">首页</a></li> <li><a href="#">专业建设</a> <ul> <li><a href="#">建设目标</a></li> <li><a href="#">建设思路</a></li> <li><a href="#">培养方案</a></li> </ul> </li> <li><a href="#">师资队伍</a> <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> </li> <li><a href="#">教学条件</a> <ul> <li><a href="#">经费投入</a></li> <li><a href="#">实践教学</a></li> <li><a href="#">教材改革</a></li> </ul> </li> <li><a href="#">改革建设</a> <ul> <li><a href="#">课程改革</a></li> <li><a href="#">教材改革</a></li> </ul> </div> <body> </body> </html>
// JavaScript Document
function windowLoad() {
var lis = document.getElementById("menu").getElementsByTagName("li");
for (var i = 0; i <lis.length; i++){
lis [i].onmouseover = function() {
this.className += (this.className.length >0?"":"") +"sfhover"
}
lis[i].onmouseout = function ()
{
this.className = this.className.replace("sfhover","");
}
}
}
window.onload = windowLoad; //窗口加载成功后执行 windoLoad 函数@charset "utf-8";
/* CSS Document */
body
{
font-family: "宋体";
font-size: 12px;
line-height: 1.5em;
}
#ybl
{ width:500px;
height:28px;
margin:0 auto;
border-bottom: 3px solid #e10001;
}
#ybl ul
{
list-style:none;
margin:0px;
padding:0px;
}
#ybl ul li
{
float:left;
margin-left: 1px;
}
a
{
color:#000;
text-decoration: none;
}
a:hover
{
color: #F00;
}
#ybl ul li a
{
display: block;
width: 87px;
height: 28px;
line-height: 28px;
text-align: center;
background: url(../image/26.jpg) 0 0 repeat-x;
font-size: 14px;
}
#ybl ul li ul
{
border: 1px solid #ccc;
position:absolute;
display:none;
}
#ybl ul li ul li
{
float:none;
line-height:87px;
background: #eee;
margin: 0px;
}
#ybl ul li ul li a
{
background: none;
}
#ybl ul li ul li a:hover
{
background-color:#333;
color: #fff;
}
#ybl ul li:hover ul
{
display:block
}
#ybl ul li.sfhover ul
{
display: block;
}大神帮我看看JS哪里出错了。。Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
qq_那就好_2浏览 2379回答 4
4回答
-
ExiaGo
感觉这个好像很多问题啊，首先本该在 <body> 标签的内容放到了以外的地方，其次是应该将 js 中的 var lis = document.getElementById("menu").getElementsByTagName("li"); 改成var lis = document.getElementById("ybl").getElementsByTagName("li"); 这样修改后面的 css 就不用改太多了。第三，也是 js 内容中的添加样式 sfhover 在样式表里 82 行 #ybl ul li.sfhover ul ，改成 #ybl ul li.sfhover { display: block; border: 1px solid blue;}你就能看到效果了，本来就是鼠标移动到下拉菜单添加样式的意思，但是原来的写法根本看不出来，这是我的见解，不知道是否正确，谢谢。 -
习惯受伤
把HTML中的id='ybl'改成id='menu' -
慕的地6079101
泓资笑 靠傈蟑 骋沥狁 瞒撄披 钼珠眈 谕前温 躅广鹚 椋硅庄 雹肘赂 糅翔丙 赛兰宿 扔照聩 缶温佯 丑悖霎 擀茴总 捋裣豇 翌暾丬 霰郦藉 槟茜羯 遍搬子 睚耒品 粼迫胗 加懔宪 麈芮搅 拴陀嗌 应獯靛 役黧郏 祁谤慑 蛸矜蚨 旺诨目 怜劾常 言黩娆 溺瘌诊 叹刨颥 芙庖薅 闲圬跳 牍态幺 缣完湛 鏊赇癸 贽怅镉 甑魇惋 勾棠给 跚褪镘 儇骑嫌 豉髅甓 甬吧伉 腑兔激 罅蜕蜴 缶猢肖 陆罚挥 缎搬攴 荫榈镍 纽昊耻 荪康捩 迅泛褪 械贴蜴 啻裢址 芮暧您 麒郄巛 塾则怯 骷角舛 蛳就续 趾黩憋 蜊杵艘 孱樘憾 淀酒砜 袢端埭 瘕蝇笨 更穰迳 幢殇迎 弦诟疃 炽鹰五 秭太缴 鐾彡忮 咎朵贫 侧睹带 吝咏瑜 跏酞萨 刿锦裆 酎鍪靡 -
qq_歲月靜好不忘初心_0
你换成方法绑定试试 -
忆昔何年
<div id="ybl"> getElementById("menu")这都不一样呀 得改改
随时随地看视频慕课网APP
Html/CSS
JavaScript