在 HTML 中使用 JavaScript 和 JQuery 的问题
[英]Issue using JavaScript and JQuery in HTML
问题描述
This is my HTML code:
这是我的 HTML 代码：
<blink>
<head>
<title>Dark</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/button.js"></script>
</head>
<body>
<script type="text/javascript" src="js/button.js"></script>
<p class="one btnall"> Text1 </p>
<p class="two btnall">Text2 </p>
<p class="three btnall"> Text 3 </p>
<br>
<a href="#" class="btn1">Button 1</a>
<br>
<br>
<a href="#" class="btn2">Button 2</a>
<br>
<br>
<a href="#" class="btn3">Button 3</a>
</body>
</html>
</blink>
And my JavaScript or JQuery (I'm not sure because I copied from internet) code:还有我的 JavaScript 或 JQuery（我不确定，因为我是从互联网上复制的）代码：
$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
$('.btnall').fadeOut();
$('.one').fadeIn();
});
$('.btn2').click(function () {
$('.btnall').fadeOut();
$('.two').fadeIn();
});
$('.btn3').click(function () {
$('.btnall').fadeOut();
$('.three').fadeIn();
});
The problem is the code doesn't work on website.问题是代码在网站上不起作用。 The code belongs to some buttons which fade some texts.该代码属于一些淡化一些文本的按钮。
3 个解决方案
解决方案1
0 2015-05-18 06:29:31
You need to wrap your code in ready .您需要将代码包装在ready 。
$(document).ready(function() {
// Your code here
});
Specify a function to execute when the DOM is fully loaded.
Docs: https://api.jquery.com/ready文档： https : //api.jquery.com/ready
Also, you have included此外，你已经包括
<script type="text/javascript" src="js/button.js"></script>
twice.两次。
First in head and at the start of body .首先在head和body的开始。
Remove one and try again.删除一个并重试。
解决方案2
0 2015-05-18 06:31:50
Place your entire jQuery code in document.ready block.将整个 jQuery 代码放在 document.ready 块中。
$(document).ready(function() {
$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function() {
$('.btnall').fadeOut();
$('.one').fadeIn();
});
$('.btn2').click(function() {
$('.btnall').fadeOut();
$('.two').fadeIn();
});
$('.btn3').click(function() {
$('.btnall').fadeOut();
$('.three').fadeIn();
});
});
解决方案3
0 2015-05-18 06:50:40
Please use place your code within请使用将您的代码放在
$(document).ready(function(){
//code
});
and place your code before end of the body tag like this并将你的代码放在 body 标签的末尾，就像这样
<script>
$(document).ready(function(){
$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
$('.btnall').fadeOut();
$('.one').fadeIn();
});
$('.btn2').click(function () {
$('.btnall').fadeOut();
$('.two').fadeIn();
$('.btn3').click(function () {
$('.btnall').fadeOut();
$('.three').fadeIn();
});
});
});
</script>
</body>
Now it will work or you can place your js code in seperate js file and link through <script src="your_path/your_js.js"></script> before </body>现在它可以工作了，或者您可以将您的 js 代码放在单独的 js 文件中，并在</body>之前通过<script src="your_path/your_js.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.