Question

简单地说，我只是想改变自己有一个“.article”类的文章部分的内容。 “.middle-main”是网站的主要div容器框，其中显示内容。因此，当我按下导航栏按钮时，我希望AJAX从两个不同的位置导入内容：“/ home.html”和“/about.html”。

这是非常简单的代码，但它不起作用：

$(document).ready(function() {
    $("#home").on("click", function() {
         $.ajax("/home.html", {
            success: function(response) { 
                $(".article").html(response);
            }
        });
        $(".middle-main").fadeToggle(1000);
    });
    $("#about").on("click", function() {
        $.ajax("/about.html", {
            success: function(response) { 
                $(".article").html(response);
            }
        });
        $(".middle-main").fadeToggle(1000);
    });
});

当我应用此解决方案时，文章部分为空白，它不会导入任何内容，为什么？

在这里上传HTML，它的Bootstrapped：

<section id="navigatory">
        <section class="boom">
            <article>
                <h1>Waffles! 
                </h1>
            </article>
        </section>
        <nav  class="container-fluid">
            <div class="row">

                <div class="col-xs-2 navbar">
                </div>
                <div class="col-xs-6 navbar">
                    <ul id="menu">
                        <li id="home"><a href="#">Home</a></li>
                        <li id="about"><a href="#">About</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 navbar">
                </div>
            </div>
        </nav>
         </section>


         <section id="main">
            <main class="container-fluid">
                <div class="row">
                    <div class="col-xs-2">
                    </div>
                    <div class="col-xs-5 middle-main">

                        <article class="article">


                        </article>
                    </div>
                    <div class="col-xs-3 middle-right">
                        <aside>


                        </aside>
                    </div>
                    <div class="col-xs-2">
                    </div>
            </main>
        </section>

        <div class="container-fluid" id="footer">
        </div>

Answer 1

只需删除fadeToggles即可！ FadeToggle让你的中间主DIV消失......

$(".middle-main").fadeToggle(1000);

请看一下 FIDDLE 为自己尝试

AJAX不会将任何数据导入该部分

1 个答案: