问题使用JavaScript和JQuery在HTML中

Issue using JavaScript and JQuery in HTML

本文关键字：HTML JQuery JavaScript 问题      更新时间：2023-09-26

这是我的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>

和我的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();
});

问题是代码不能在网站上工作。这个代码属于一些按钮，这些按钮会使一些文本褪色。

您需要在ready中包装您的代码。

$(document).ready(function() {
    // Your code here
});

指定一个在DOM完全加载时执行的函数。

文档:https://api.jquery.com/ready

还包括

<script type="text/javascript" src="js/button.js"></script>

两次。

在head和body开始时。

将整个jQuery代码放在文档中。准备好块。

$(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();
      });
  });

请使用

$(document).ready(function(){
 //code
});

并将代码放在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>

现在它将工作，或者你可以把你的js代码在单独的js文件和链接通过<script src="your_path/your_js.js"></script>之前</body>

相关文章：