-1

如何通过 Ajax 从单独的容器中调用内容（URL：http: //internetbusinesspotential.com/cdc/slidedown-menu2.html）

这是我的问题，我正在尝试调用 html 文件以使用 ajax 调用填充页面上的 #content 容器。我已经在 ul="nav" 菜单的主要 li 元素上使用了 Javascript 下拉效果。这是 div 的特殊性：#maincontainer #leftMenu #nav li a

我知道这很简单，我只是忽略了它。

#content 容器通过加载 gif 进行动作，如果您单击子导航元素，甚至会再次重新加载主页内容

请帮忙！！

文件负责人：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Slide down menu</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slidedown-menu2.css">

<script type="text/javascript" src="js/slidedown-menu2.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <link rel="stylesheet" href="css/contentBase.css">
        <link rel="stylesheet" href="css/css.css">

<script type="text/javascript" src="js/js.js"></script>

HTML：

<body>
<div id="mainContainer">

    <div id="leftMenu">
            <h3><a href="#">Topic Homepage</a></h3>
        <!-- START OF MENU -->
        <div id="nav_slidedown_menu">
            <ul id="nav">
                <li><a href="article1.html">Products</a>
                    <ul>
                        <li><a href="#">Menus</a>
                            <ul>
                                <li><a href="#">Download</a>
                                    <ul>
                                        <li><a href="#">Download</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Demo</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Calendar scripts</a>
                            <ul>
                                <li><a href="#">Download</a></li>
                                <li><a href="#">Demo</a></li>

                                <li><a href="#">Is it cross browser?</a>
                                    <ul>
                                        <li><a href="#">yes it is</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Window scripts</a>
                            <ul>
                                <li><a href="#">Download</a></li>
                                <li><a href="#">Demo</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Form widgets</a>
                            <ul>
                                <li><a href="#">Download</a></li>
                                <li><a href="#">Demo</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="article2.html">Support</a>
                    <ul>
                        <li><a href="#">Phone</a></li>
                        <li><a href="#">Email</a></li>
                        <li><a href="#">QnA</a></li>
                    </ul>
                </li>
                <li><a href="article3.html">History</a>
                    <ul>
                        <li><a href="#">1900 - 1940</a></li>
                        <li><a href="#">1941 - 1980 </a></li>
                        <li><a href="#">1981 - Present time</a></li>
                    </ul>
                </li>
                <li><a href="article4.html">The team</a>
                    <ul>
                        <li><a href="#">Person A</a>
                            <ul>
                                <li><a href="#">CV</a>
                                    <ul>
                                        <li><a href="#">Job 1</a></li>
                                        <li><a href="#">Job 2</a></li>
                                        <li><a href="#">Job 3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Education</a></li>
                                <li><a href="#">Experience</a>
                                    <ul>
                                        <li><a href="#">Job 1</a>
                                            <ul>
                                                <li><a href="#">Accomplished this</a></li>
                                                <li><a href="#">Accomplished that</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Job 2</a></li>
                                        <li><a href="#">Job 3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Person B</a></li>
                        <li><a href="#">Person C</a></li>
                        <li><a href="#">Person D</a></li>
                        <li><a href="#">Person E</a></li>

                    </ul>
                </li>
                <li><a href="article5.html">Locations</a>
                    <ul>
                        <li><a href="#">Norway</a></li>
                        <li><a href="#">United States</a></li>
                        <li><a href="#">United Kingdom</a></li>
                        <li><a href="#">Sweden</a></li>
                        <li><a href="#">Denmark</a></li>
                        <li><a href="#">Finland</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    <div class="bottom"></div>
        <!-- END OF MENU -->
        <script type="text/javascript">
        initSlideDownMenu();
        </script>


    </div>

<div class="contentContainer">
    <div id="wrapper">
        <div id="content">      
            <h2>Welcome!</h2>
            <p>This is where the content will load in here...</p>

        </div>
    </div>
</div>



</div>


</body>

JavaScript：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

CSS：

    @charset "utf-8";
    /* CSS Document */

        /*
        General rules
        */
        #mainContainer #leftMenu{
            position:relative;
            margin:0;
            padding:0/* 12px 0 0*/;
            height:auto;
            width:179px;
            color:#fff;
            clear:both;
            float:left;
            background:transparent url('../img/bg_leftNav_new.gif') repeat-y top left;
        }
        .optional #leftMenu {z-index:10;}

        #leftMenu, #mainContainer .bottom {background:transparent url('../img/bg_leftNav_new.gif') repeat-y top left;}


        .topicHome #nav_slidedown_menu li#local-az-link {display:none;}

        body #mainContainer h3 a {
            background-image: url('../img/bg_leftMenuH3_blue.gif');
            color: #FFF;
            line-height: 28px;
            padding-left: 5px;
        }

        #leftMenu,
        #mainContainer .bottom {
            background: transparent url('../img/bg_leftMenu_blue.gif') repeat-y top left; 
        }

        /* Active menu item */
        #nav_slidedown_menu .nav_activeItem {
            font-weight:bold;
            color: #ccc;
        }

        #nav_slidedown_menu li{
            list-style-type:none;
            position:relative;
        }
        #nav_slidedown_menu ul{
            margin:0px;
            padding:0px;
            position:relative;

        }

        #nav_slidedown_menu div{
            margin:0px;
            padding:0px;
        }
        /*  Layout CSS */
        #nav_slidedown_menu .slideMenuDiv2{
            width:175px;
        }

        #nav_slidedown_menu .slideMenuDiv3{
            width:225px;
        }
        #nav_slidedown_menu{
            width:205px;
        }

        /* All A tags - i.e menu items. */
        #nav_slidedown_menu a{
            color: #fff;
            text-decoration:none;
            display:block;
            clear:both;
            width:170px;
            padding-left:2px;
        }

        /* Active menu item */
        #nav_slidedown_menu .nav_activeItem {
            font-weight:bold;
            color: #CCC;
        }

        /*
        A tags
        */
        #nav_slidedown_menu .slMenuItem_depth1{ /* Main menu items */
            margin-top:0px;
            background: #4a6bad;
            font-weight:bold;
            padding: 5px .5px 5px 5px;
        }
        #nav_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */
            margin-top:0px;
            background: #7faee2;
            font-weight:bold;
            padding: 5px .5px 5px 15px;
        }
        #nav_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */
            margin-top:0px;
            background: #dcecfb;
            color: #000;
            padding: 5px .5px 5px 25px;
        }
        #nav_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */
            margin-top:0px;
            background: #edf5fe;
            color: #000;
            padding: 5px .5px 5px 25px;
        }
        #nav_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */
            margin-top:0px;
            background: #fff;
            color: #000;
            padding: 5px .5px 5px 25px;
        }

        /* UL tags, i.e group of menu utems.
        It's important to add style to the UL if you're specifying margins. If not, assign the style directly
        to the parent DIV, i.e.

        #nav_slidedown_menu .slideMenuDiv1

        instead of

        #nav_slidedown_menu .slideMenuDiv1 ul
        */

        #nav_slidedown_menu .slideMenuDiv1 ul{
            padding:1px;
        }
        #nav_slidedown_menu .slideMenuDiv2 ul{
            margin:0px;
            padding: 0px 10px 0px 0px;
        }
        #nav_slidedown_menu .slideMenuDiv3 ul{
            margin-left:0px;
            padding: 0px 10px 0px 0px;
        }
        #nav_slidedown_menu .slMenuItem_depth4 ul{
            margin-left:15px;
            padding:1px;
        }



    #mainContainer .bottom { /* bottom */
        position:relative;
        margin:0 0 0em 0;
        height:15px; /** = height of bottom cap/shade */
        width:179px;
        border:none;
        background-color:#4a6bad;
        background-position:bottom left;
    }

        #mainContainer .bottom {
        background: transparent url('../img/bg_leftNav_new.gif') repeat-y bottom left; 
    }


#wrapper {
    width: 480px;
    margin: 10px 0 0 15px;
    background: #0d0d0d url(img/header.jpg) no-repeat;
    padding: 58px 25px 55px 25px;
    border: 12px solid #2e2e2e;
    position:relative;
}
h1 {
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0.3em 0;
    text-indent:-99999px;
}

#load {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    background:url(../img/ajax-loader.gif);
    width: 43px;
    height: 11px;
    text-indent: -9999em;
}

.contentContainer { float:left; width: 200px;}

#content {
}
h2 {
    margin: 0;
    padding: 0.5em 0;
    color:#568945;
    font-family:Helvetica, Arial, Sans-serif;
}
p {
    margin: 0;
    padding: 0.4em 0;
    color:#686868;
    line-height:1.4em;
}
#content img.right {
    float: right;
    margin: 0 0 8px 8px;

}
#foot {
    padding: 15px;
    color: white;
    text-align: center;
    margin: 30px 0 0 0;
    border-top:1px solid #222222;
}
4

1 回答 1

0

好的，我在定义 onLoad 后通过重写它来工作：

$('#content').load(toLoad,'',function(returnText,status,request){});

整个脚本：

// JavaScript Document

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#toc li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#toc li a').click(function(){

        var toLoad = $(this).attr('href')+'.html #content';
        $('#content').load(toLoad,'',function(returnText,status,request){

        });


        $('#content').hide('slow',loadContent);
        $('#load').remove();
        $('#conContainer').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent());
        }
        function showNewContent() {
            $('#content').show('slow',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });
于 2012-05-31T18:41:30.423 回答