更换除页脚以外的车身

时间:2014-11-07 12:50:00

标签: html ajax

我使用它来加载页面并替换当前页面:

    $.get('genres.html').done(function (data) {
        $('#pagecontent').html(data);
    })

当我这样做时,de body中的所有内容都会被新内容所取代。 除了这个页脚,我需要更换整个身体。 我确实看到了关于div的一些事情:不是,但我认为这不适用于ajax。

如何替换除页脚之外的所有内容:

<footer class="footer bg-dark">
<div id="jp_container_N">
    <div class="jp-type-playlist">
        <div id="jplayer_N" class="jp-jplayer hide"></div>
        <div class="jp-gui">
            <div class="jp-video-play hide"><a class="jp-video-play-icon">play</a></div>
            <div class="jp-interface">
                <div class="jp-controls">
                    <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a>
                    </div>
                    <div><a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                        <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                    </div>
                    <div><a class="jp-next"><i
                                class="icon-control-forward i-lg"></i></a></div>
                    <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a>
                    </div>
                    <div><a class="" data-toggle="dropdown" data-target="#playlist"><i
                                class="icon-list"></i></a></div>
                    <div class="jp-progress hidden-xs">
                        <div class="jp-seek-bar dk">
                            <div class="jp-play-bar bg-info"></div>
                            <div class="jp-title text-lt">
                                <ul>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                    <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                    <div class="hidden-xs hidden-sm"><a class="jp-mute" title="mute"><i
                                class="icon-volume-2"></i></a> <a class="jp-unmute hid"
                                                                  title="unmute"><i
                                class="icon-volume-off"></i></a></div>
                    <div class="hidden-xs hidden-sm jp-volume">
                        <div class="jp-volume-bar dk">
                            <div class="jp-volume-bar-value lter"></div>
                        </div>
                    </div>
                    <div><a class="jp-shuffle" title="shuffle"><i
                                class="icon-shuffle text-muted"></i></a> <a
                            class="jp-shuffle-off hid" title="shuffle off"><i
                                class="icon-shuffle text-lt"></i></a></div>
                    <div><a class="jp-repeat" title="repeat"><i
                                class="icon-loop text-muted"></i></a> <a
                            class="jp-repeat-off hid" title="repeat off"><i
                                class="icon-loop text-lt"></i></a></div>
                    <div class="hide"><a class="jp-full-screen" title="full screen"><i
                                class="fa fa-expand"></i></a> <a class="jp-restore-screen"
                                                                 title="restore screen"><i
                                class="fa fa-compress text-lt"></i></a></div>
                </div>
            </div>
        </div>
        <div class="jp-playlist dropup" id="playlist">
            <ul class="dropdown-menu aside-xl dker">
                <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                <li class="list-group-item"></li>
            </ul>
        </div>
        <div class="jp-no-solution hide"><span>Update Required</span> To play the media
            you will need to either update your browser to a recent version or update
            your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash
                plugin</a>.
        </div>
    </div>
</div>
</footer>

1 个答案:

答案 0 :(得分:1)

将页脚外部的所有内容放入容器中,然后替换其中的内容。类似的东西:

<div id="content">
    ...your content here
</div>
<footer>
</footer>

然后做:

$.get('genres.html').done(function (data) {
    $('#content').html(data);
})