似乎无法让我的jQuery工作

时间:2013-12-11 23:08:36

标签: javascript jquery html css web

我需要另外一套眼睛。当我使用jsfiddle一切正常但由于某种原因我不能让它在Dreamweaver中运行。我没有错误等。我稍后会再试一次,因为可能是我的Dreamweaver出现故障。查看代码并告诉我您的想法。显然这是一项正在进行的工作。代码如下。

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="Portfolio.css" />
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script src="PortfolioControl.js" type="text/javascript"></script>
        <title>Home Page</title>
    </head>

<body>

<!-- CONTENT //-->
    <table align="center" id="navTable">
        <tr>
<!-- NAME AND LOGO //-->
            <td colspan='2' id="titleBar">
            </td>
        </tr>
        <tr>
            <td>
                <div class="navButton">
                    <p>Home</p>
                </div>
            </td>
<!-- RIGHT SIDE //-->
            <td id="rightSide" rowspan='5'>
                <p>replaced on ready</p>
            </td>
        </tr>
        <tr>
            <td>
                <div class="navButton">
                    <p>Art</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="navButton">
                    <p>Projects</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="navButton">
                    <p>Blog</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="navButton">
                    <p>Contact</p>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

CSS

body {
    background: #000000;
}

/* TITLE */
#titleBar {
    height: 100px;
}

/* DYNAMIC RIGHT SIDE*/
#rightSide {
    width: 620px;
    border-left: 2px solid white;
    padding: 15px;
}

#rightSide p {
    color: #FFFFFF;
}

/* MAIN PAGE TABLE */
#navTable {
    margin-top:200px;
    width: 800px;
    padding: 20px;
    background-color: #000000;
}
#navTable td {
    padding-right: 15px;
}

/* NAV BUTTONS */
.navButton p {
    font-size: 18px;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    color: #FFFFFF;
}

.navButton p:hover {
    color: #FF7600;
}

的Javascript

 $(document).ready(function() {
    //create a p
    var yay = $('<p>Yay</p>');

    $('rightSide').append(yay);
});

2 个答案:

答案 0 :(得分:1)

这是因为在你的jQuery函数中你没有为rightSide元素确定正确的选择器。

jQuery $(&#39;&#39;)选择器使用与CSS相同的结构,因此您在rightSide之前缺少ID标识符。

$('#rightSide').append(yay);

应该有用。

答案 1 :(得分:0)

这是它无法正常工作的原因...... 显然我需要下载jQuery并使用本地文件而不是尝试链接到Google。我很确定我之前已经链接到了Google API,所以我不确定为什么我这次不能。无论如何,谢谢大家的帮助。