Question

我一直在使用本教程中的JS脚本：https://css-tricks.com/rethinking-dynamic-page-replacing-content/ 但是我遇到了一个问题，即只有标题中的链接才能使页面动态更改

<header><ul class="group"><li><a href="example.html">Example</a></li></ul></header>

我想要做的是让div中的动态更改，更改的链接也会触发此更改。

<div id="guts"><a href="doesnotworkcorrectly.html">Groan</a></div>

如何修改此脚本

$(function() {
if(Modernizr.history){

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() {
    _link = $(this).attr("href");
    history.pushState(null, null, _link);
    loadContent(_link);
    return false;
});

function loadContent(href){
    $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(href + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                    });
                    $("nav a").removeClass("current");
                    console.log(href);
                    $("nav a[href$="+href+"]").addClass("current");
                });
            });
}

$(window).bind('popstate', function(){
   _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
   loadContent(_link);
});

} // otherwise, history is not supported, so nothing fancy here.


});

这样我就可以在div中使用类＆＃34;更改＆＃34; （或其他）在这样的页面上。（此脚本的基本设置可以使用）

<body>
<div id="page-wrap">
<header>
<nav>
  <ul class="group">
    <li><a href="index.php">Home</a></li>
    <li><a href="courses.php">Courses and Programs</a></li>
    <li><a href="services.php">Drones</a></li>
    <li><a href="jobs.php">About Landstown</a></li>
    <li><a href="contact.php">Contact Us</a></li>
 </ul>
</nav>
</header>
<section id="main-content">
<div id="guts">
<a href="help.html>Help!</a>
</div>
</section>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
</body>

感谢您提前回复

Answer 1

除非我弄错了，否则将'nav'的实例更改为'document'将使所有链接动态生效。

Answer 2

<nav>
<section id="main-content">
<div id="guts">
<a href="help.html>Help!</a>
</div>
</section>
</nav>

在<nav>之前插入<section>，以解决问题，动态更改div中的链接。

Answer 3

这是一种通过动态更改内部linsk解决问题的简单方法。

<body>

<div id="page-wrap">

<nav>
<ul class="group">
<li><a class="item" href="index.php">Home</a></li>
<li><a class="item" href="courses.php">Courses and Programs</a></li>
<li><a class="item" href="services.php">Drones</a></li>
<li><a class="item" href="jobs.php">About Landstown</a></li>
<li><a class="item" href="contact.php">Contact Us</a></li>
 </ul>
</nav>

<div id="spinner"></div>
<div id="guts">
<a class="item" href="help.html">Help!</a>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</body>

<script>
$(document).ready(function(){
    $(".item").ajax();
});

$.fn.ajax = function(){
    $(function(){
        if (Modernizr.history){
            var $mainContent = $("#guts"),
                $body        = $("body"),
                $el;
            $("#page-wrap").on("click", ".item", function(){
                loadLink = $(this).attr("href");
                history.pushState(null, null, loadLink);
                loadContent(loadLink);
                return false;
            });
            function loadContent(href){
                $mainContent.fadeOut(250, function(){
                    $("#spinner").show();
                    $mainContent.load(href + " #guts", function(){
                        $("#spinner").hide();
                        $mainContent.fadeIn(250);                       
                        console.log(href);
                    });
                });
                return false;
            }
            $(window).bind("popstate", function(){
                loadLink = location.pathname.replace(/^.*[\\\/]/, '');
                loadContent(loadLink);
            });
        }
    });
}
</script>

修改动态页面JS插件以允许正文中的链接动态更改页面

3 个答案: