完全相同的jquery代码在一个html文档中工作而不是另一个

时间：2011-05-29 17:28:04

标签： jquery html css

我正在尝试使用EXACT SAME jQuery代码。它适用于一个html文档，但不适用于第二个。我也在这些文档中使用CSS。 CSS和jQuery代码都不在外部文件中。我觉得解决方案可能很简单，请原谅我缺乏知识。我将保留jQuery代码，CSS代码，不能与jQuery一起运行的html代码以及它在文档中的外观（一体化）。我将按照确切的顺序列出它们。

JQUERY CODE：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".showr").click(function(){
    $(".vidr").css('visibility','visible');
    $(".vids").css('visibility','hidden');
  });
  $(".shows").click(function(){
    $(".vidr").css('visibility','hidden');
    $(".vids").css('visibility','visible');
  });
    $(".left").click(function(){  
    $(".showr").animate({"left":"-=110px"},"slow");
    $(".shows").animate({"left":"-=110px"},"slow");
  });
    $(".right").click(function(){  
    $(".showr").animate({"left":"+=110px"},"slow");
    $(".shows").animate({"left":"+=110px"},"slow");
  });
});
</script>

CSS代码：

<style type="text/css">
html,body
{
padding:0;
margin:0;
height:1200px;
overflow-y:scroll;
}
body
{
overflow-x:hidden;
overflow-y:hidden;
}
.stretch
{
width:100%;
height:1200px;
position:relative;
z-index:-2;
}
.topmenu
{
position:relative;
top:-2400px;
left:100px;
z-index:-1;
}
.videoplayer
{
position:relative;
top:-3600px;
left:100px;
z-index:-1;
}
.videoscroller
{
position:relative;
top:-4800px;
left:100px;
z-index:-1;
}
.twitterfeed
{
position:relative;
top:-8755px;
left:100px;
z-index:-1;
}
.slider
{
position:relative;
left:263px;
bottom:3050px;
z-index:0;
overflow:hidden;
width:485px;
height:160px;
margin:0px; 
padding:5px;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.left
{
position:relative;
left:208px;
bottom:3175px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:black;
border:solid 1px #c3c3c3;
}
div.right
{
position:relative;
left:761px;
bottom:3272px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:white;
border:solid 1px #c3c3c3;
}
div.videos
{
position:absolute;
left:210px;
top:138px;
z-index:1;
width:592px;
height:383px;
margin:0px; 
padding:5px;
}
iframe
{
position:absolute;
left:20px;
top:20px;
}
img.showr
{
position:absolute;
z-index:2;
}
img.shows
{
position:absolute;
left:180px;
z-index:2;
}

</style>

HTML CODE：

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
</head>

<body>
<div><img src="Background2IBSTV.jpg" class="stretch"/>
</div>
<div style="position:relative; top:-1200px; left:100px;" class="stretch"><img src="railsIBSTV.png"/>
</div>
<div class="topmenu"><img src="Top_MenuIBSTV.png"/>
</div>
<div class="videoplayer"><img src="video_playerIBSTV.png"/>
<div class="videos">
<iframe class="vidr" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/nwYYaqs_yM4" frameborder="0" allowfullscreen></iframe>
<iframe class="vids" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/fO4aXYETHxE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="videoscroller"><img src="video_scrollerIBSTV.png"/>
<img src="left_arrowIBSTV.png" style="position:relative; left:-22px; bottom:1200px;"/>
<img src="right_arrowIBSTV.png" style="position:relative; left:22px; bottom:2400px;"/>
<div class="slider">
<img src="rampage-jackson.jpg" class="showr" width="165" height="150">
<img src="Professional.jpg" class="shows" width="165" height="150">
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="twitterfeed"><img src="twitter_feedIBSTV.png"/><p style="position:relative; left:455px; bottom:450px; font-size:35px; color:lightgrey;">Twitter</p>
</div>
</body>
</html>

ALL IN ONE（确切地说它在文档中的样子）

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".showr").click(function(){
    $(".vidr").css('visibility','visible');
    $(".vids").css('visibility','hidden');
  });
  $(".shows").click(function(){
    $(".vidr").css('visibility','hidden');
    $(".vids").css('visibility','visible');
  });
    $(".left").click(function(){  
    $(".showr").animate({"left":"-=110px"},"slow");
    $(".shows").animate({"left":"-=110px"},"slow");
  });
    $(".right").click(function(){  
    $(".showr").animate({"left":"+=110px"},"slow");
    $(".shows").animate({"left":"+=110px"},"slow");
  });
});
</script>
<style type="text/css">
html,body
{
padding:0;
margin:0;
height:1200px;
overflow-y:scroll;
}
body
{
overflow-x:hidden;
overflow-y:hidden;
}
.stretch
{
width:100%;
height:1200px;
position:relative;
z-index:-2;
}
.topmenu
{
position:relative;
top:-2400px;
left:100px;
z-index:-1;
}
.videoplayer
{
position:relative;
top:-3600px;
left:100px;
z-index:-1;
}
.videoscroller
{
position:relative;
top:-4800px;
left:100px;
z-index:-1;
}
.twitterfeed
{
position:relative;
top:-8755px;
left:100px;
z-index:-1;
}
.slider
{
position:relative;
left:263px;
bottom:3050px;
z-index:0;
overflow:hidden;
width:485px;
height:160px;
margin:0px; 
padding:5px;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.left
{
position:relative;
left:208px;
bottom:3175px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:black;
border:solid 1px #c3c3c3;
}
div.right
{
position:relative;
left:761px;
bottom:3272px;
z-index:0;
overflow:hidden;
width:42px;
height:80px;
margin:0px; 
padding:5px;
background:white;
border:solid 1px #c3c3c3;
}
div.videos
{
position:absolute;
left:210px;
top:138px;
z-index:1;
width:592px;
height:383px;
margin:0px; 
padding:5px;
}
iframe
{
position:absolute;
left:20px;
top:20px;
}
img.showr
{
position:absolute;
z-index:2;
}
img.shows
{
position:absolute;
left:180px;
z-index:2;
}

</style>
</head>

<body>
<div><img src="Background2IBSTV.jpg" class="stretch"/>
</div>
<div style="position:relative; top:-1200px; left:100px;" class="stretch"><img src="railsIBSTV.png"/>
</div>
<div class="topmenu"><img src="Top_MenuIBSTV.png"/>
</div>
<div class="videoplayer"><img src="video_playerIBSTV.png"/>
<div class="videos">
<iframe class="vidr" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/nwYYaqs_yM4" frameborder="0" allowfullscreen></iframe>
<iframe class="vids" style="visibility:hidden;" width="560" height="349" src="http://www.youtube.com/embed/fO4aXYETHxE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="videoscroller"><img src="video_scrollerIBSTV.png"/>
<img src="left_arrowIBSTV.png" style="position:relative; left:-22px; bottom:1200px;"/>
<img src="right_arrowIBSTV.png" style="position:relative; left:22px; bottom:2400px;"/>
<div class="slider">
<img src="rampage-jackson.jpg" class="showr" width="165" height="150">
<img src="Professional.jpg" class="shows" width="165" height="150">
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="twitterfeed"><img src="twitter_feedIBSTV.png"/><p style="position:relative; left:455px; bottom:450px; font-size:35px; color:lightgrey;">Twitter</p>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：2)

我认为问题在于内联样式和样式表样式之间的jquery版本和/或冲突。

我设置了一个jsfiddle，如果你运行你的HTML和jquery在jquery 1.2.6上没有任何反应，但代码在jquery版本1.3.2,1.4.4,1.5.2,1.6上运行正常。< / p>

我没有在小提琴中包含css，因为你有内联样式以及使用样式表 - 两者之间的冲突打破了js小提琴上的页面，所以我猜有冲突会导致不必要的副作用。< / p>

我会转而使用辅助方法而不是直接引用CSS样式;所以使用：

$(".vidr").hide();

而不是：

$(".vidr").css('visibility','hidden');

你可能想看一下jquery animate function，因为我不确定你对它的使用是否达到你想要它的目的。

相关问题
最新问题