[英]My markup works in jsfiddle but not in any browser
I asked a similar question before but wasn't able to get an answer. 我之前问过类似的问题,但无法得到答案。 Now its been verified that the the html works in jsfiddle. 现在已经验证了html可在jsfiddle中使用。 But when I run the .html file it doesn't work. 但是,当我运行.html文件时,它不起作用。 I am very confused, I have never faced this problem before. 我很困惑,我以前从未遇到过这个问题。 If anyone sees anything please let me know. 如果有人看到任何东西,请告诉我。 Thanks 谢谢
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#container{width:978px;}
.content {
display: none;
padding-left: 5px;
left: 0px;
width: 100%;
top: 30px;
background: yellow;
}
ul{width: 100%;}
li{
float: left;
padding: 5px;
background: #e5e5e5;}
#div{
background: #9e9e9e;
height: 20px;
width: 978px;
}
br{
clear: left;
}
</style>
<script type="text/javascript">
$(function() {
$('.action').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
content.slideToggle('fast');
});
});
</script>
</head>
<body>
<div id="container"><ul>
<li>
<a href="#" class="action" name="summer">summer</a>
</li>
<li>
<a href="#" class="action" name="winter">winter</a>
</li>
<li>
<a href="#" class="action" name="weather">weather</a>
</li>
</ul></div><br>
<div class="content" name="summer">
<a href="link">june</a>
<a href="link">july</a>
</div>
<div class="content" name="winter">
<a href="link">november</a>
<a href="link">december</a>
</div>
<div class="content" name="weather">
<a href="link">rain</a>
<a href="link">sun</a>
</div>
<div id="div"></div>
</body>
</html>
You have an invisible invalid character just before the </script>
. 您在</script>
之前有一个看不见的无效字符。 Remove it and it's OK. 删除它就可以了。
jsfiddle adds the normalize.css . jsfiddle添加了normalize.css 。 After removing the invisible chars , I've added following line into the head. 除去不可见的字符后,我将以下行添加到头部。
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
I've tested your code. 我已经测试了您的代码。 With following line it works. 随着下面的行,它的工作原理。
=== UPDATE === ===更新===
Here the tested code: 这里是经过测试的代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<!-- link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css" -->
<style type="text/css">
#container{width:978px;}
.content {
display: none;
padding-left: 5px;
left: 0px;
width: 100%;
top: 30px;
background: yellow;
}
ul{width: 100%;}
li{
float: left;
padding: 5px;
background: #e5e5e5;}
#div{
background: #9e9e9e;
height: 20px;
width: 978px;
}
br{
clear: left;
}
</style>
<script type="text/javascript">
$(function() {
$('.action').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
content.slideToggle('fast');
});
});
</script>
</head>
<body>
<div id="container"><ul>
<li>
<a href="#" class="action" name="summer">summer</a>
</li>
<li>
<a href="#" class="action" name="winter">winter</a>
</li>
<li>
<a href="#" class="action" name="weather">weather</a>
</li>
</ul></div><br>
<div class="content" name="summer">
<a href="link">june</a>
<a href="link">july</a>
</div>
<div class="content" name="winter">
<a href="link">november</a>
<a href="link">december</a>
</div>
<div class="content" name="weather">
<a href="link">rain</a>
<a href="link">sun</a>
</div>
<div id="div"></div>
</body>
</html>
Works with firefox and IE8. 适用于Firefox和IE8。
Your JS code in the page needs to be 页面中的JS代码需要为
$(document).ready(function() {
$('.action').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
content.slideToggle('fast');
});
});
And add http:
to the jQuery
url: 并将http:
添加到jQuery
URL:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.