Question

所以，我在这里有一个小小的简单jquery，div会稍微向下滑动。但是jquery文件中的NOTHING有效：

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});
      });    
});

但是，我有一个不同的网站，完全相同的代码，那个工作！我需要它来处理这个问题。有什么建议？你能在这里看到什么问题吗？

HTML：

<div class="packages">
    <div class="starter">
        <span><a href="@Href("#")" class="starterLink"><h1 class="starterLink">Starter Pack</h1></a></span>
    </div>
    <div class="business">
        <span><h1>Business</h1></span>
    </div>
    <div class="corporate">
        <span><h1>Corporate</h1></span>
    </div>
</div>
<div class="packageSummaries">
    <div class="starterSummary">
        <h1>Free Advertising</h1>
        <p></p>
        <a href="" class="roundedButton silver">Service Link</a>
    </div>
    <div class="businessSummary">
        <h1></h1>
        <p>Service summary</p>
        <a href="" class="roundedButton silver">Service Link</a>
    </div>
    <div class="corporateSummary">
        <h1>Service Heading</h1>
        <p>Service summary</p>
        <a href="" class="roundedButton silver">Service Link</a>
    </div>
</div>

的CSS：

.packages {
    width: 60%;
    background-image: url('../Images/pres-bg.png');
    background-repeat: repeat;
    float: left;
}
.packageSummaries {
    width: 40%;
    float: right;
}
.starter {
    position: relative;
    width: 35%;
    float: left;
    height: 140px;
    overflow: hidden;

    background-color: #02A7FF;
    opacity: .7;
}
.starter span {
  position: absolute;    
  bottom: 0;    
  right: 0; 
}
.business {
    position: relative;
    width: 35%;
    float: left;
    height: 140px;
    overflow: hidden;

    background-color: #FF7402;
    opacity: .7;
}
.business span {
  position: absolute;    
  bottom: 0;    
  right: 0; 
}

.corporate {
    position: relative;
    width: 30%;
    float: left;
    height: 140px;
    overflow: hidden;
    background-color: #111111;
    opacity: .7;
}
.corporate span {
  position: absolute;    
  bottom: 0;    
  right: 0; 
}
.starterSummary {
    padding-left: 8px;
    margin: 0;
    width: 0px;
    background-color: Blue;
    overflow: hidden;
}
.businessSummary {
    padding-left: 8px;
    margin: 0;
    width: 0px;
    overflow: hidden;

}
.corporateSummary {
    padding-left: 8px;
    margin: 0;
    width: 0px;
    overflow: hidden;

}

非常感谢任何帮助。这让我很难过。

谢谢

Answer 1

好像你有}};在你的jQuery中。您应该考虑在您正在使用的浏览器中检查错误控制台。它可能会显示该错误。

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});
      });    
});

<强>更新

也可能是因为你缺少对jquery.js的引用。检查它是否包含在脚本标记中并且URL是否正确。

Answer 2

如果jQuery不存在，您应该收到错误。尝试在浏览器控制台上键入$，看看是否收回了jQuery对象。

尝试从Google或其他CDN加载jquery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

Answer 3

脚本中存在语法错误：

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});
    // -->  });    
});

Answer 4

<a href="@Href("#")"..>

报价错误。

尝试使用w3验证器和jslint查看是否所有内容都有效如果可能的话，指向实际网站的链接也会有所帮助。

Answer 5

看起来像});的简单语法错误不应该存在。

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});    
});

如果您的代码中有错误，那么Javascript都不会有效。

您通常可以使用Firebug（如果您使用的是Firefox）或浏览器的开发者控制台来追踪问题。

Answer 6

无法匹配的大括号})和href="@Href("#")"的含义是什么？

Answer 7

将href="@Href("#")"替换为href="@Href('"'#'"')"

这是一个DEMO

您可能无法看到动画，因为它会尝试导航到链接，在这里您可以看到动画http://jsfiddle.net/wvaE3/3/

jQuery只是不再工作（在我的网站上）

7 个答案: