0

我正在使用“DynamicPage”jQuery 插件来使我的页面在导航时不会重新加载。在索引页面上是一个名为“Coin-Slider”的图像滑块插件。动态页面工作正常，除非我单击返回图像滑块所在的索引页面。出于某种原因（据我所知），投币滑块就绪功能在返回索引时未激活。可能与 URL 有关，因为 host.com/index.php 有效，但 host.com/#index.php 无效。有什么理由这样做吗？我尝试在 js 文件的 DynamicPage 函数中包含 ready 函数，以便在页面更改时执行，但它没有帮助。页面包含在下面。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css.css" rel="stylesheet" type="text/css" />
        <title>Liberty Design, Scarborough</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
        <script type='text/javascript' src='js/dynamicpage.js'></script>
        <script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
    </head>
    <body>
        <div id="nav-back"></div>
        <div id="wraps">
            <div id="left-wrap"></div>
            <div id="right-wrap"></div>
        </div>
        <div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
            <div id="page-wrap">
                <div id="header">
                    <div id="banner">
                        <div id="social"><a href="https://www.facebook.com/pages/Liberty-Retreat/195182670529660"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></a></div>
                    </div>
                </div>
                <navbar>
                    <div id="nav">
                        <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
                        <ul id="navbar">
                            <li><a href="index.php">Home</a></li>
                            <li><a href="test.php">Facilities</a></li>
                            <li><a href="#">Staff</a></li>
                            <li><a href="#">Where are we?</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </navbar>
                <section id="main-content">
                    <div id="guts">           
                        <!-- Content Start -->
                        <div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
                            <div id="gamesHolder">
                                <div id="games">
                                    <img src="images/banner_img/1335800583.png" alt="Welcome" />
                                    <span>
                                        <b>Welcome</b><br/>
                                        Welcome to Liberty
                                    </span>
                                    <img src="images/banner_img/1335800633.png" alt="shop front" />
                                    <span>
                                        <b>shop front</b><br/>
                                        this is the front of the shop
                                    </span>
                                    <img src="images/banner_img/" alt="staff #3" />
                                    <span>
                                        <b>staff #3</b>
                                        <br/>this is the description for staff #3
                                    </span>
                                    <img src="images/banner_img/" alt="staff #1" />
                                    <span>
                                        <b>staff #1</b><br/>
                                        this is staff #1
                                    </span>
                                    <img src="images/banner_img/" alt="asdas" />
                                    <span>
                                        <b>asdas</b><br/>
                                        sdasdas
                                    </span>       
                                </div>
                            </div>
                        </div>
                       <script>
                            $(document).ready(function() {
                                $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
                            });
                        </script>
                    </div>
                </section>
                <div id="footer">
                    <!-- Cosmetics for the footer -->
                    <div id="footer-back"></div>
                    <div id="footer-wraps">
                        <div id="footer-left-wrap"></div>
                        <div id="footer-right-wrap"></div>
                    </div>
                    <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
                    <center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
                </div>
            </div>
        </div>
    </body>
</html>
4

1 回答 1

1

Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).

First fix to your problem: instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php

Second fix is:

<script>
$(document).ready(function() {
  var sliderInit = false;

  $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
  // Adding fix
  $('#idOfLinkThatGetsClicked').click(function () {

    if (!sliderInit) {
      $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
      sliderInit = true;
    }
  });
});
</script>
于 2012-05-04T22:39:09.540 回答