62,074
社区成员
发帖
与我相关
我的任务
分享Jquery里面怎么多了一个div
<ul>
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div>
内容区1</div>
<div>
内容区2</div>
<div>
内容区3</div>
Jquery代码如下：
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
// 将当前区域的li隐藏
alert("x");
$("div.contentin").removeClass("contentin");
alert("y");
// 将当前li所对应的区域显示出来
$("div").eq(index).addClass("contentin");//注意就这个地方，我这里当index等于0的时候添加就不行，必须要index等于1的时候添加才可以，我的页面明明就3个div，但是在火狐中看下面出现第4个div？ 为什么呢？火狐中看到的如下：<div id="livemargins_control" style="position: absolute; display: none; z-index: 9999;"><img width="77" height="5" style="position: absolute; left: -77px; top: -5px;" src="chrome://livemargins/skin/monitor-background-horizontal.png"> <img style="position: absolute; left: 0pt; top: -5px;" src="chrome://livemargins/skin/monitor-background-vertical.png"> <img style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;" onmouseout="this.style.opacity=0.5" onmouseover="this.style.opacity=1" src="chrome://livemargins/skin/monitor-play-button.png" id="monitor-play-button"></div>，多了个他。
alert("z");
})
})
})
总结问题就是：我HTML编辑器中总共就3个DIV，怎么火狐运行后会出现第4个DIV？ 还有我的3个div在Jquery中是从0开始索引？还是从1开始索引？
...全文
请发表友善的回复…
发表回复
yzf86211861 2010-06-08
- 打赏
- 举报
代码没有问题测试成功
起个名字真难啊啊啊啊啊 2010-06-08
- 打赏
- 举报
可能是你火狐装了什么插件导致的
比如firebug就会多一个Script标签
比如firebug就会多一个Script标签
论文MVP网 2010-06-08
- 打赏
- 举报
不存在，你看到的就是我的一切代码
yuxh81 2010-06-08
- 打赏
- 举报
外层存在其它div？
论文MVP网 2010-06-08
- 打赏
- 举报
那我的$("div").length为什么等于4？
lcomplete 2010-06-08
- 打赏
- 举报
从 0开始索引的
nocallstle 2010-06-08
- 打赏
- 举报
环境中的页面代码
运行后火狐中的html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
无标题页
</title>
<script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$("div.contentin").removeClass("contentin").addClass("nones");
$("div").eq(parseInt(index)+1).removeClass("nones").addClass("contentin");
});
})
})
</script>
<style type="text/css">
.contentin{ display:block;}
.nones{ display:none;}
</style>
</head>
<body>
<form name="form1" method="post" action="div.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRUWCfosjjMDI2OEjj/9g0huIbm5w==" />
</div>
<ul>
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="nones">
内容区1</div>
<div class="nones">
内容区2</div>
<div class="nones">
内容区3</div>
</form>
</body>
</html>
这个是aspx页面生成的代码。楼主换一种方法
我在你的代码上改的:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="div.aspx.cs" Inherits="sqlTity.div" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$("div.contentin").removeClass("contentin").addClass("nones");
$("div").eq(parseInt(index)+1).removeClass("nones").addClass("contentin");
});
})
})
</script>
<style type="text/css">
.contentin{ display:block;}
.nones{ display:none;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="nones">
内容区1</div>
<div class="nones">
内容区2</div>
<div class="nones">
内容区3</div>
</form>
</body>
</html>
运行后火狐中的html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
无标题页
</title>
<script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$("div.contentin").removeClass("contentin").addClass("nones");
$("div").eq(parseInt(index)+1).removeClass("nones").addClass("contentin");
});
})
})
</script>
<style type="text/css">
.contentin{ display:block;}
.nones{ display:none;}
</style>
</head>
<body>
<form name="form1" method="post" action="div.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRUWCfosjjMDI2OEjj/9g0huIbm5w==" />
</div>
<ul>
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="nones">
内容区1</div>
<div class="nones">
内容区2</div>
<div class="nones">
内容区3</div>
</form>
</body>
</html>
这个是aspx页面生成的代码。楼主换一种方法
我在你的代码上改的:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$("div.contentin").removeClass("contentin").addClass("nones");
$("div[name='div1']").eq(index).removeClass("nones").addClass("contentin");
});
})
})
</script>
<style type="text/css">
.contentin{ display:block;}
.nones{ display:none;}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div name="div1" class="nones">
内容区1</div>
<div name="div1" class="nones">
内容区2</div>
<div name="div1" class="nones">
内容区3</div>
</form>
</body>
</html>
nocallstle 2010-06-08
- 打赏
- 举报
我测试也没有问题，自己检查你的页面，样式等这类的
