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>");
        });
    }
});

你应该达到预期的效果。

Answer 2

不要使用异步动态加载，请使用简单的脚本元素：

menu_header.js

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>');
}

menu1.html

<html>
<head>
  <script src="jquery-1.11.3.js"></script>
</head>
<body>
<div>whatever</div>
<div id="menu-header"><script src="menu_header.js"></script></div>
<div>whatever else</div>
</body>
</html>

这样就可以避免瞬间丢失导航部分，因为在加载页面时脚本会同步执行。

Answer 3

如果有效，请尝试此操作。我是用纸做的，所以你需要测试它是否完美无缺

$("#menu-header").load("include/menu_header.html", function(html) {
    var $menu = jQuery(html),
    currentURI = window.location.pathname.substring(location.pathname.lastIndexOf("/");


   $menu.find("[href='./"+currentURI+"']").attr("href","#");

   // Do whatever you want to do with $menu

});

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

3 个答案:

menu_header.js

menu1.html