jquery - 让jQuery显示页面名称

Question

我有一个嵌套在 header.php 中的菜单，它加载到我网站的每个不同页面上。

我想使用 jQuery 显示用户当前正在访问的页面的名称。显示名称的 div 分配有一个 .menu_location_inner 类。我认为代码看起来像这样。

$(document).ready(function() {
    $(".menu_location_inner").html('some code here')
});

如何将页面名称保存在 DOM 中并完成上面的代码？

Answer 1

假设您想要自定义消息，而不仅仅是页面标题标签中的任何内容(如果已设置)，您可以根据 url 有条件地命名一个变量，就像这样...

$(document).ready(function() {
  var page1 = location.href.match("index.html");
  var page2 = location.href.match("contact.html");
  var page3 = location.href.match("feedback.html");

  if(location.href.match(page1)) {
    var thisPage = "You're on our main page!"
  }

 if(location.href.match(page2)) {
    var thisPage = "You're on our contact page!"
  }

 if(location.href.match(page3)) {
    var thisPage = "You're on our feedback page!"
  }

  $(".menu_location_inner").html(thisPage);

});

编辑:此外，使用 jQuery HTML 功能可以为您提供一些额外的处理能力。这也可能有帮助，我更改了代码片段的最后一部分以演示...

$(document).ready(function() {
  var page1 = location.href.match("index.html");
  var page2 = location.href.match("contact.html");
  var page3 = location.href.match("feedback.html");

  if(location.href.match(page1)) {
    var thisPage = "You're on our main page!"
  }

 if(location.href.match(page2)) {
    var thisPage = "You're on our contact page!"
  }

 if(location.href.match(page3)) {
    var thisPage = "You're on our feedback page!"
  }
  //You can wrap your answer in any tag you'd like
  //You also have the option to add ID's and/or classes here
  $(".menu_location_inner").html('<p class="myClass" id="myID">' + thisPage + '</p>');

});