jquery不能在html文件上工作

當我在我的web瀏覽器（chrome）上加載html文件時，css文件可以工作，但jQuery動畫不起作用。我無法弄清楚什麼是錯的。順便說一句，我非常新的編碼。jquery不能在html文件上工作

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Button Magic</title> 
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
      <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
     </head> 
     <script>  
     $(document).ready(function() { 
      $('div').click(function() { 
       $(this).fadeOut('slow'); 

       }); 
      }); 
     }); 

     </script> 
     <body> 
     <div> 

     </div> 


    </body> 
</html> 


div { 
    height: 50px; 
    width: 120px; 
    border-color: #6495ED; 
    background-color: #BCD2EE; 
    border-width: 2px; 
    border-style: solid; 
}

來源

2016-01-13 Shaheer Saif

試着把'script'標籤放在HTML的'head'部分？ – faino

你有一個額外的關閉'}）'在你的Javascript – Vince

問題是多餘的括號}）;

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Button Magic</title> 
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
      <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
     </head> 
     <style> 
     div { 
      height: 50px; 
      width: 120px; 
      border-color: #6495ED; 
      background-color: #BCD2EE; 
      border-width: 2px; 
      border-style: solid; 
     } 
     </style> 
     <script>  
     $(document).ready(function() { 
      $('div').click(function() { 
       $(this).fadeOut('slow');    
      }); 
     }); 

     </script> 
     <body> 
     <div> 

     </div> 


    </body> 
</html>

來源

2016-01-13 02:16:41

謝謝！我擺脫了額外的}）;並將腳本src更改爲http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js，因爲我的html文件在本地運行。 –

在Javascript中有一個額外的右括號和括號（});）。除此之外，我認爲你的代碼工作正常。

...通過語法高亮保存... :)

來源

2016-01-13 02:26:43 Vince

首先結帳的jQuery的工作，

<script> 
$(document).ready(function(){ 
    alert(" "); 
}); 
</script>

然後做你想要什麼，這是完整的代碼，HTML，CSS和js（希望你的鏈接jquery庫不工作，最好總是使用外部的css和js）。

<!DOCTYPE> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

</head> 
<body> 

    <div class="yourdiv" style="width:100px;height:100px;background-color:black;"> 

    </div> 

<script type="text/javascript"> 
    $("div.yourdiv").click(function(){ 
    $(this).fadeOut(1000); // this 1000 means within this ms it fadeOut. and this keyword says div.yourdiv 
    }); 
</script> 
</body> 
</html>

來源

2016-01-13 04:31:06

這裏是您的解決方案

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Button Magic</title> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <style> 
      div { 
       height: 50px; 
       width: 120px; 
       border-color: #6495ED; 
       background-color: #BCD2EE; 
       border-width: 2px; 
       border-style: solid; 
      } 
     </style> 
     <script> 
      $(document).ready(function() { 
       $('div').click(function() { 
        $(this).fadeOut('slow'); 

       }); 
      }); 
    // }); 
    // Remove or hide above extra brackets. 

     </script> 
    </head> 

    <body> 
     <div> 
     </div> 
    </body> 
</html>

腳本});刪除多餘的右括號放入頭部分 <script>塊，並在頭段<style>塊複製的div的CSS。檢查ans腳本..我希望它會爲你工作。

來源

2016-01-13 04:56:46

jquery不能在html文件上工作

回答

相關問題