2

我有一个 html 文件，我正在使用将div.load()的某些部分从另一个 html 文件加载到原始 html 中的div ( ) 中。它确实加载了html文件。但它会加载整个 html 文件，而不仅仅是 div。我该怎么做才能只加载所需的 div，即。，来自另一个html？任何帮助都感激不尽。谢谢！ photo_indexprofile_wrapper_container_FormLogsphoto_index

html:

            <div id="profile_leftbar">

                <div id="profile_wrapper_container_summary">
                    <div id="profile_container_summary">
                        <div id="profile_summary">
                            <div id="profile_box1" class="box">
                                <a href="kkh.html" id="photo"><p>Photo</p>
                                    <p>450</p></a>
                            </div>
                            <div id="profile_box2" class="box">
                                <a href="#" id="video"><p>Video</p>
                                    <p>132</p></a>
                            </div>
                            <div id="profile_box3" class="box">
                                <a href="#" id="page"><p>Page</p>
                                    <p>14</p></a>
                            </div>
                            <div id="profile_box4" class="box">
                                <a href="#" id="forum"><p>Forum</p>
                                    <p>51</p></a>
                            </div>
                            <div id="profile_box5" class="box">
                                <a href="#" id="followers"><p>Followers</p>
                                    <p>551</p></a>
                            </div>
                            <div id="profile_box6" class="box">
                                <a href="#" id="following"><p>Following</p>
                                    <p>317</p></a>
                            </div>
                            <span class="clear_left"></span>
                        </div>
                        <div id="profile_status">
                            <p>What???</p>
                        </div>
                    </div>
                </div>

                <div id="profile_wrapper_container_FormLogs">
                    <div id="profile_container_status_form">
                        <textarea class="profile_status_form"></textarea>
                    </div>
                    <div id="profile_container_logs">

                        <div class="profile_logs">
                            <p>Added photo on 30th oct</p>
                        </div>
                        <div class="profile_logs">
                            <p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Added photo on 16th oct</p>
                        </div>
                        <div class="profile_logs">
                            <p>Updated status 'Do you really think so?' on 10th Oct.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Uploaded video.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Added photo on 30th oct</p>
                        </div>
                        <div class="profile_logs">
                            <p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Added photo on 16th oct</p>
                        </div>
                        <div class="profile_logs">
                            <p>Updated status 'Do you really think so?' on 10th Oct.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Uploaded video.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Added photo on 30th oct</p>
                        </div>
                        <div class="profile_logs">
                            <p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Added photo on 16th oct</p>
                        </div>
                        <div class="profile_logs">
                            <p>Updated status 'Do you really think so?' on 10th Oct.</p>
                        </div>
                        <div class="profile_logs">
                            <p>Uploaded video.</p>
                        </div>

                    </div>
                </div>

            </div>

另一个html：

    <div id="test">
        <h1>Testing the .load()</h1>
    </div>


    <div id="photo_index">



        <div id="tools_photo">
            <ul id="tools">
                <li><a href="#">All</a></li>
                <li><a href="#">Album</a></li>
                <li><a href="#">Tagged Photo</a></li>
                <li><a href="#">Upload Photo</a></li>
            <span class="clear_left"></span>
            </ul>
        </div>



        <div id="photo_index_page">

                <div id="container_thumbnail_container">
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img2.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img3.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img4.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img5.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img2.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img3.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img4.jpg" class="thumbnail" /></a>
                    </div>
                    <div class="thumbnail_container">
                        <a href="#" class="gallery" title="{{photo.title}}"><img src="img5.jpg" class="thumbnail" /></a>
                    </div>
                <span class="clear_left"></span>
                </div>
        </div>
    </div>

.js：

$(document).ready(function () {
    $(".box a").click(function () {
        $("#profile_wrapper_container_FormLogs").load(this.href + "#photo_index");
        return false;
    });
});
4

3 回答 3

3

问题：

您当前的代码将创建一个类似的 url http://dummy.com/index.html#photo_index，这将从页面加载整个 html。

$("#profile_wrapper_container_FormLogs").load(this.href + "#photo_index");

解决方案：

在前面放一个" "空格" #photo_index"：

$("#profile_wrapper_container_FormLogs").load(this.href + " #photo_index");
                                           //-------------^^--put a space here

或者这样：

$("#profile_wrapper_container_FormLogs").load(this.href + " " +"#photo_index");
                                          //--------------^^--put a space here
于 2013-11-08T07:47:52.543 回答
0

假设您在另一个 html 文件中的目标除法元素具有 id #target（文件名是 another.html）假设您当前 html 页面中的当前除法元素具有 id #result

如果您想将该目标元素加载到当前结果元素中，那么

使用此代码 $("#result").load("another.html #target ", null, function(){ );

第一个参数是文件 url，第二个参数是要发送到该 url 的数据，第三个是回调函数。#target 指定另一个.html 页面中的目标元素。

感谢你

于 2013-11-08T08:24:28.873 回答
0

尝试这个

var toLoad = this.href+' #photo_index';
$('#profile_wrapper_container_FormLogs').load(toLoad)
于 2013-11-08T07:59:19.823 回答