-1

別のコンテナーから Ajax 経由でコンテンツを呼び出すにはどうすればよいですか (URL: http://internetbusinesspotential.com/cdc/slidedown-menu2.html )

これは私の問題です。html ファイルを呼び出して、ページ上の #content コンテナーを ajax 呼び出しで埋めようとしています。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

OK 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 に答える