Question

我正在使用“DynamicPage”jQuery插件，以便在导航时不重新加载我的页面。在索引页面上是一个名为“Coin-Slider”的图像滑块插件。动态页面工作正常，除非我单击返回到图像滑块所在的索引页面。由于某种原因（从我所知道的），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>

Answer 1

好的，mydomain.com和mydomain.com/#anything是相同的，它们指向您的默认文件，可以是index.php，index.html或其他。浏览器在导航到同一文件但不同的哈希标记时不会刷新，例如：从文件#hashA到文件#hashB或从文件到文件#hashRandom或从文件#index.php到文件。由于页面没有刷新（被借入），文档就绪也没有被触发（它已经在第一次加载页面时被触发）。

首先解决您的问题：而不是链接到mydomain.com/#index.php链接到mydomain.com或mydomain.com/index.php

第二个修复是：

<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>

为什么url中的“＃”会阻止jquery脚本执行？

1 个答案: