为什么这在我的php文档中不起作用的任何想法? 当我在jsfiddle上测试时,一切正常。
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
</head>
<body>
<div class="shipping-container">
<a href="#" class="ups">Show UPS info</a>
<a href="#" class="fedex">Show Fedex info</a>
<div class="ups info" style="display:none">the info for ups</div>
<div class="fedex info" style="display:none">Who let the dogs out</div>
</div>
</body>
答案 0 :(得分:6)
你错过了文件就绪处理程序,试试这个:
<script type="text/javascript">
$(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
或者,保留script
标记,但将其放在文档末尾,</body>
标记之前。
答案 1 :(得分:2)
您应该确保只在DOM完全加载后才加载您的JQuery代码:
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
答案 2 :(得分:1)
您正在链接元素存在之前运行脚本。
在jsfiddle中,默认情况下将代码放在加载文档后运行的事件中。使用ready
事件在您的代码中执行此操作:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
答案 3 :(得分:1)
我认为你应该在标题中这样做:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
这将确保在您尝试附加任何事件处理程序之前加载所有DOM对象(尤其是a元素)。