Question

我有一个我确定是一个简单的问题。我刚接触编码，只是学习html / css / jquery的基础知识。我正在尝试通过点击加载内容。这是我的代码，提前感谢您的耐心等待。

html:
 <!DOCTYPE html>
<html>
<head>
<link type="text/javascript" src="wedding_projectJQuery.js"></link>
<link type="text/css" rel="stylesheet" href="wedding_projectStyles.css"/>
<title>Jason & Ashley Wedding</title>
</head>

<body>
    <h1>Jason & Ashley's Wedding Website</h1>
    <div id="loader"></div>
    <table>
        <tr>
            <td id="date">Date</td>
            <td id="photos">Photos</td>
            <td id="donate">Donate</td>
        </tr>

    </table>
</body>

</html>

CSS：

h1 {
    text-align:center;
}


#loader {
    text-align:center;
    border: 2px solid black;
    margin:auto;
    height: 500px;
    width: 1000px;
}

table {
    padding:0px;
    border: 2px solid black;
    width:1000px;
    height:75px;
    margin:2px auto;
    clear:both;
}
td {
    width:250px;
    margin:0px;
    padding:0px;
    text-align:center;
    border: 1px solid black;
    padding:0px;
    margin:0px;
}
td:hover {
    background-color:green;
}

Jquery的：

$(document).ready(function(){
    $("#date").click(function(){
        $("#loader").prepend('<p>The date is October 25th, 2014. The ceremony will begin when the fat lady sings.</p>');

    });

});

Answer 1

您需要在页面中包含jQuery，它应该可以正常工作。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="wedding_projectJQuery.js"></script>

另请注意，您需要使用<script></script>代替<link />来包含您的Javascript文件

<强> Fiddle Demo

Answer 2

添加到JQuery js库的链接后，

从此处更改您的JQuery代码：

$("#loader").prepend('<p>The date is October 25th, 2014. The ceremony will begin when the fat lady sings.</p>');

到此：

$("#loader").html('<p>The date is October 25th, 2014. The ceremony will begin when the fat lady sings.</p>');

如何在单击Jquery </div>时将<p>添加到</p> <div>

2 个答案: