个人中心
gpt4 book ai didi

jquery - 为什么我的 JQuery 不显示在 div 中？

转载 作者：行者123 更新时间：2023-11-28 02:09:59 25 4
gpt4 key购买 nike

我试图让 $('#live-demo).fbwall 在 facebook 模块的 div 内部执行。当我在没有其余页面内容的情况下自行加载脚本时，它工作正常。我做错了什么现在有冲突吗？我只学过 html 和 css，现在正试图掌握其他一些语言的窍门，所以我知道我还有很多学习要做。如果我需要发布任何 css 或 js 文件，请告诉我。谢谢。

更新了 HTML 以包含到目前为止所做的更改

编辑已解决。有一个太多的结束标签以及一些其他错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="This Moment, Studio, Design, Web, Icons, Logos" />
    <meta name="description" content="This Moment Studio is a photography agency that takes amazing photos!" />
    <meta name="author" content="William McKenney" />
    <meta name="robots" content="all" />
    <title>This Moment Studio</title>
    <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" />
    <link href="jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        div#live-demo {
        width:500px;
        height:300px;
        overflow:auto;
    }
    </style>
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="jquery.neosmart.fb.wall.js" type="text/javascript"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#live-demo').fbWall({
                            id:'308294672531766',
                            accessToken:'323594700988256|g0Zr3Y_0tzS6TGo-DFjtNKfiJA8',
                            showGuestEntries:false,
                            showComments:false,
                            max:3,
                            timeConversion:12});
                        });
                </script>
</head>
<body>
    <!-- STATUS BAR -->
    <div id="status-bar">
        <div id="status-bar-content">
            <form action="#search" method="post" id="search-form">
                <p>
                    <input type="text" name="query" value="Search" />
                    <input type="submit" name="submit" value="Search!" />
                </p>
            </form>
            <div id="status-bar-commands">
                <p id="welcome">Welcome, Guest</p>
                <p id="action-bar">
                    <a href="#login" title="Login">Login</a>
                    <a href="#sitemap" title="Sitemap">Sitemap</a>
                    <a href="#license" title="License">License</a>
                </p>
            </div>
        </div>
    </div>
    <!-- HEADER -->
    <div id="header">
        <div id="logo">
            <h1><a href="#home" title="Home Page">This Moment</a></h1>
            <h2>Studio</h2>
        </div>
    </div>
    <!-- CONTENT -->
    <div id="content">
        <!-- TABS -->
        <ul id="tabs">
            <li id="previous">
                <a href="#previous" title="Previous">&lt;</a>
            </li>
            <li id="home" class="current">
                <a href="#home" title="Home">Home</a>
            </li>
            <li id="portfolio">
                <a href="#portfolio" title="Portfolio">Portfolio</a>
            </li>
            <li id="about">
                <a href="#about" title="About">About</a>
            </li>
            <li id="contact">
                <a href="#contact" title="Contact">Contact</a>
            </li>
            <li id="next">
                <a href="#next" title="Next">&gt;</a>
            </li>
        </ul>
        <!-- PAGE WRAPPER -->
        <div id="page-wrapper">
            <!-- SLIDESHOW -->
            <div id="slideshow">
                <div id="slides">
                    <a href="#portfolio.work1" title="See details" class="thumb default-slide">
                        <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" />
                    </a>
                    <a href="#portfolio.work2" title="See details" class="thumb">
                        <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" />
                    </a>
                    <a href="#portfolio.work3" title="See details" class="thumb">
                        <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" />
                    </a>
                </div>
                <div id="slideshow-commands">
                    <a href="#previous" title="Previous" id="previous-slide">&lt;</a>
                    <a href="#next" title="Next" id="next-slide">&gt;</a>
                    <h4>
                        <a href="#portfolio.work1" title="See details" id="slide-title">
                            Flex Engine Web Design
                        </a>
                    </h4>
                </div>
            </div>
            <!-- MESSAGE -->
            <div id="message">
                <h3>We build great websites!</h3>
                <p>
                    Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus.
                    Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing,
                    metus sed luctus condimentum, quam turpis interdum tortor,
                    in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
                    ultricies vitae, porttitor ut, dignissim vitae, elit.
                </p>
                <p id="contact-info">
                    <span id="phone">+33 1 23 45 67 89</span>
                    <span id="address">
                        34, Avenue des Champs-<br />
                        Elys꦳, 75006, Paris,<br />
                        France
                    </span>
                </p>
            </div>
        </div>
        <!-- BLOG MODULE -->
        <div class="module" id="blog">
            <h4 class="module-header-bar">Latest entries from the blog</h4>
            <div class="blog-entry">
                <h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5>
                <p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
                <blockquote class="content">
                    <p>
                        Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus.
                    </p>
                </blockquote>
            </div>
            <div class="blog-entry">
                <h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a></h5>
                <p class="meta">By The Team - 05 / 01 / 09</p>
                <blockquote class="content">
                    <p>
                        Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit.
                    </p>
                </blockquote>
            </div>
            <div class="blog-entry">
                <h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
                <p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
                <blockquote class="content">
                    <p>
                        Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem.
                    </p>
                </blockquote>
            </div>
            <p id="read-more-wrapper">
                <a href="#blog" title="Read More">
                    Read More
                </a>
            </p>
        </div>
        <!-- FACEBOOK MODULE -->
        <div id="live-demo"> 
        </div>  
    </div>
    <div id="footer">
        <div id="footer-image"></div>
        <p id="footer-text">
            Copyright ɠ2009 Roadside Studio<br />
            All Rights Reserved
        </p>
    </div>
</body>
</html>

最佳答案

始终将您的 jquery 代码包装在就绪处理程序中，以便它在 DOM 完成加载时执行，例如

$(document).ready(function(){

//your fb plugin code here
});

或者你可以使用速记法

$(function(){
//your code here

});

或者你可以将 js 代码放在文档的末尾，以确保它在 DOM 完成加载时执行

关于jquery - 为什么我的 JQuery 不显示在 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8938204/

25 4 0
文章推荐： html - WooCommerce - 如何删除空格
文章推荐： php - 为用户输入创建 PHP 页面和弹出窗口时出现 Ajax 问题
文章推荐： html - CSS 边框在 div 外溢出
文章推荐： javascript - 嵌入 JavaScript？或者也许使用了其他一些技术？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com