62,046
社区成员
发帖
与我相关
我的任务
分享jq 实现菜单栏 但是不成功，告诉我为什么
首先是这样效果的：
而我自己做的demo 确没有这种效果。
我把代码全部给出来吧。
各位给我看看。是哪里的问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" ></script>
<style type="text/css">
#menu{ width:604px; height:50px;
background-image:url('images/wooden8.png');
font-size:15px; line-height:45px;font-family:Arial;
margin: auto;
}
#menu li{ float:left; margin-left:30px;list-style-type:none; line-height:40px; }
#content li{ list-style-type:none; width:200px;display:none;}
.activeTab {
background-color:#C9AA7C;
text-shadow: #ffffff 0px 1px 0px;
background-image:url('images/wood3.jpg');}
#menu li a{text-decoration:none; color:#291B16;
text-shadow: #C9AA7C 0px 1px 0px;
font-weight:bold;}
#tabcontent{ width:250px; list-style-type:none;}
.text label {display:block;}
</style>
<script type="text/javascript">
$(function () {
var droplink = $("#menu ul li");
droplink.hover(function () {
var currItem = $(this);
var menuItem = $("#menu li");
var currItemoffset = currItem.offset().left;
var tabcontent = $("#tabcontent");
var tabcontentwidth = tabcontent.width();
var tabli = tabcontent.find("li");
var move = Math.floor(currItemoffset - tabcontentwidth);
if ($.browser.mise) {
move -= 15;
}
tabcontent.css('margin-left', move);
tabcontent.stop().animate({ height: "200px" }, "200");
currItem.addClass("activeTab");
var attr = currItem.find("a").attr("href");
var currtab = tabli.filter(attr);
currtab.show();
currtab.appendTo(tabcontent).show();
return false;
}, function () {
$(this).stop();
$(this).removeClass("activeTab");
}
);
});
</script>
</head>
<body>
<div id="menu">
<ul id="panel">
<li><a href="#tab1">Login</a></li>
<li><a href="#tab2">ForgotPassword</a></li>
<li><a href="#tab3">Contract</a></li>
</ul>
</div>
<div id="content">
<ul id="tabcontent">
<li id="#tab1">
<div class="text" >
<label for="username" >Username</label>
<input type="text" name="username" id="username"/>
</div>
<div class="text">
<label for="password">Password</lable>
<input type="text" name="password" id="password"/>
</div>
<div id="tab1button">
<button>Login</button>
</div>
</li>
<li id="#tab2">
<div class="text">
<label for="">Username</label>
<input type=text name="username" id="username" />
</div>
<div id="tab2button">
<button>Resend</button>
</div>
</li>
<li id="#tab3">
<div class="text">
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail"/>
</div>
<div class="text">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject"/>
</div>
<div class="text">
<label for="password">Password</label>
<input type="text" id="password" name="password"></inpit>
</div>
<div id="tab3button">
<button>send</button>
</div>
</li>
</ul>
</div>
</body>
</html>
而我自己做的demo 确没有这种效果。
我把代码全部给出来吧。
各位给我看看。是哪里的问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" ></script>
<style type="text/css">
#menu{ width:604px; height:50px;
background-image:url('images/wooden8.png');
font-size:15px; line-height:45px;font-family:Arial;
margin: auto;
}
#menu li{ float:left; margin-left:30px;list-style-type:none; line-height:40px; }
#content li{ list-style-type:none; width:200px;display:none;}
.activeTab {
background-color:#C9AA7C;
text-shadow: #ffffff 0px 1px 0px;
background-image:url('images/wood3.jpg');}
#menu li a{text-decoration:none; color:#291B16;
text-shadow: #C9AA7C 0px 1px 0px;
font-weight:bold;}
#tabcontent{ width:250px; list-style-type:none;}
.text label {display:block;}
</style>
<script type="text/javascript">
$(function () {
var droplink = $("#menu ul li");
droplink.hover(function () {
var currItem = $(this);
var menuItem = $("#menu li");
var currItemoffset = currItem.offset().left;
var tabcontent = $("#tabcontent");
var tabcontentwidth = tabcontent.width();
var tabli = tabcontent.find("li");
var move = Math.floor(currItemoffset - tabcontentwidth);
if ($.browser.mise) {
move -= 15;
}
tabcontent.css('margin-left', move);
tabcontent.stop().animate({ height: "200px" }, "200");
currItem.addClass("activeTab");
var attr = currItem.find("a").attr("href");
var currtab = tabli.filter(attr);
currtab.show();
currtab.appendTo(tabcontent).show();
return false;
}, function () {
$(this).stop();
$(this).removeClass("activeTab");
}
);
});
</script>
</head>
<body>
<div id="menu">
<ul id="panel">
<li><a href="#tab1">Login</a></li>
<li><a href="#tab2">ForgotPassword</a></li>
<li><a href="#tab3">Contract</a></li>
</ul>
</div>
<div id="content">
<ul id="tabcontent">
<li id="#tab1">
<div class="text" >
<label for="username" >Username</label>
<input type="text" name="username" id="username"/>
</div>
<div class="text">
<label for="password">Password</lable>
<input type="text" name="password" id="password"/>
</div>
<div id="tab1button">
<button>Login</button>
</div>
</li>
<li id="#tab2">
<div class="text">
<label for="">Username</label>
<input type=text name="username" id="username" />
</div>
<div id="tab2button">
<button>Resend</button>
</div>
</li>
<li id="#tab3">
<div class="text">
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail"/>
</div>
<div class="text">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject"/>
</div>
<div class="text">
<label for="password">Password</label>
<input type="text" id="password" name="password"></inpit>
</div>
<div id="tab3button">
<button>send</button>
</div>
</li>
</ul>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
vince_zheng 2013-03-01
- 打赏
- 举报
LMAOhuaNL 2013-03-01
- 打赏
- 举报
应该不是兼容性的问题可能是缺少什么文件或者是哪里的jq方法使用不当，要不一步步的调试调试
vince_zheng 2013-03-01
- 打赏
- 举报
没报错，就是没有效果。
vince_zheng 2013-03-01
- 打赏
- 举报
应该不会吧，我参照它做的那个都没问题的。
vince_zheng 2013-03-01
- 打赏
- 举报
有这些文件 只是在上面没有copy出来而已。
H_Gragon 2013-03-01
- 打赏
- 举报
楼主不出效果，报错吗？
我是小李 2013-03-01
- 打赏
- 举报
使用hover有可能是兼容性不好。
ycproc 2013-02-28
- 打赏
- 举报
看看有没有缺少JS文件引用和CSS的引用，最好把你这里的效果截图
