javascript - 如何使用JS来控制包含的HTML文件返回的内容？

Question

我使用 jQuery 加载 HTML 的可重用部分:

$("#menu-header").load("include/menu_header.html");

这应该返回一个导航页码列表，如下所示:

<span class="menu-link">
    <a href="./menu1.html">1</a>
</span>
<span class="menu-link">
    <a href="./menu2.html">2</a>
</span>

我想做的是删除 <a>当前页面的标签。因此，如果浏览器当前位于页面 menu2.html指向第二页的链接不应是链接，而应是普通文本。

这是我在include/menu_header.html中尝试做的事情:

<script src="jquery-1.11.3.js"></script>
<script>
    cur_page_fname = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
    if (cur_page_fname == 'menu1.html') {
        document.write(
                '<span class="menu-link">1</span>');
        document.write(
                '<span class="menu-link"> <a href="./menu2.html">2</a> </span>');
    } else if (cur_page_fname == 'menu2.html') {
        document.write(
                '<span class="menu-link"> <a href="./menu1.html">1</a> </span>');
        document.write(
                '<span class="menu-link">2</span>');
    }
</script>

但是它的作用是——暂时——显示没有导航菜单的页面，然后立即更改为除了导航菜单之外没有任何内容的白色页面，并且没有应用任何 CSS。这个导航菜单看起来符合预期，但是如何在普通页面中制作导航菜单呢？

Answer 1

$("#menu-header").load("include/menu_header.html");

页面加载后调用。然后你调用:

document.write(...

由于页面已经呈现，因此开始写入新页面。如果您这样创建menu_header.html:

<span class="menu-link menu1"> <a href="./menu1.html">1</a> </span>
<span class="menu-link menu2"> <a href="./menu2.html">2</a> </span>

...然后调用加载函数如下:

$("#menu-header").load("include/menu_header.html", function() {
    cur_page_fname = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
    if (cur_page_fname == 'page1.html') {
        $('span.menu2 a').replaceWith(function(){
            return $("<span>" + $(this).html() + "</span>");
        });
    }
    if (cur_page_fname == 'page2.html') {
        $('span.menu1 a').replaceWith(function(){
            return $("<span>" + $(this).html() + "</span>");
        });
    }
});

您应该达到预期的结果。