HTML and JQuery in Webstorm IDE

HTML and JQuery in Webstorm IDE

本文关键字:Webstorm IDE in JQuery and HTML      更新时间:2023-09-26

我有一个非常基本的问题。我有一个webstorm项目与HTML文件,CSS文件和JS文件。

我用"div"创建了一个圆圈,并试图在JS中单击后使其褪色。

需要补充的是,我已经从google API中获得了Jquery API,但也下载了一个不同的Jquery API到webstorm IDE的全局库中。我不知道这是否会引起任何问题

HTML, CSS, JS跟随

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type='text/javascript' src='bounce.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="ball" id="mb" ></div>
</body>
</html>
.ball {
    width: 100px;
    height: 100px;
    background-color:blue;
    border:2px solid;
    border-radius:100%;
}
$(document).ready(function() {
    $('div').click(function() {
        $('div').fadeOut('slow')
    });
});

感谢您的帮助

…添加样式和脚本标签…效果不错……EJK

<html>
    <head lang="en">
        <title></title>
        <meta charset="UTF-8">
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='bounce.js'></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="ball" id="mb" ></div>
    </body>
</html>
<style>
.ball {
width: 100px;
height: 100px;
background-color:blue;
border:2px solid;
border-radius:100%;
}
</style>
<script>
    $(document).ready(function() {
    $('div').click(function() {
    $('div').fadeOut('slow')
    });
    });
</script>

. .希望这能帮到你…EJK