jquery,没有刷新页面

时间:2016-03-26 02:22:20

标签: javascript jquery html ajax html5

我正在尝试使用ajax,因此页面不会自动刷新,但由于某种原因,我似乎无法让它工作。我使用这个Link

来实现这个效果

你可以看到它如何在没有重新加载的情况下滑动,但是我似乎无法让网站完全工作甚至重新加载。当我点击链接时,什么都没有出现。

我正在尝试使用登录和注册页面。当我点击链接时,没有任何反应。

再次感谢您的帮助。

<div class="navbar navbar-default" role="navigation">  
  <div class="container">     
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class = "logo">
        <img src="Image/Logo.png" class="img-responsive"/>
     </div> 
        </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="about.php">About</a>
        </li>
        <li><a href="login.php">Login</a>
        </li>
        <li><a href="reg.php">Become A member</a>
        </li>
      </ul>
    </div>
    </div>  
</div>

    <div class="container">
        <div class="Mainbody">

    <div class="linetop"> 
        <div class="linebottom">
            <h3>JULY 19th, 2016</h3>
            <!-- <h1><span>J</span>UST <span>J</span>UICE</h1> -->
            <h1>INTO THE NEW YOU</h1>
            <h2>THE APPLICATION TO A HEALTHIER LIFESTYLE</h2>
            <div class="bottop"> 
            <div class="botbottom"></div>
            </div>
            </div>
    </div>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="navbar-text pull-left">
                <div class="logo1">
                    <img src="Image/Logo.png" class="img-responsive"/>
                    <p>&copy; 2016 by JJ. CopyRight Ali Issa</p>
                </div>
            </div>
            <div class="navbar-text pull-right">
                <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                <a href="#"><i class="fa fa-instagram fa-2x"></i></a>
            </div>
        </div>
    </div>





    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    <script type='text/javascript' src='js/dynamicpage.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(function() {

            var newHash      = "",
                $mainContent = $("#main-content"),
                $pageWrap    = $("#page-wrap"),
                baseHeight   = 0,
                $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');
});

编辑:

添加新代码后,现在所做的一切都是正常刷新而不是淡入,淡出

0 个答案:

没有答案