php - HTML 导航、Ajax 但兼容 JavaScript 禁用

Question

我有一个导航系统，我想使其与禁用 javascript 的客户端和支持 Ajax 的客户端兼容。现在我在导航中生成了动态链接，如“index.php?page=/cat/page.php”。

<li id="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li>

所以当索引有“page”变量时，它会在主容器中加载该页面。

但我也喜欢使用 ajax(包括 jquery)使其加载 onclick。所以我添加了这段代码:

$(document).ready(function(){
  $('li #sidebaritem').click(function() {
    //Page Load code goes here
    });
});

这是行不通的，因为当我点击链接时，在 li->click 发生后它立即重定向到 Anchor 标签指向的页面(当然它指向)。

我花了一些时间寻找关于这个主题的教程，但没有找到任何有用的东西。

我怎样才能让它发挥作用？从 SEO 的 Angular 来看，这好吗？我看到了this使用哈希的文章，这对 SEO 有好处吗？如果有用，我如何才能让它在 Java 禁用机器上运行？

抱歉英语不好，我是这门学科的新手，我正在边学边学。

Answer 1

首先，Java 和 JavaScript 是两个独立的事物，您正在使用 JavaScript。其次，你应该用 class="sidebaritem"替换 id="sidebaritem"除非 id 是唯一的，但从你给定的代码我不认为它是。同样在 jQuery 和 CSS(这是选择器的来源)中，如果您使用 li space #id 这意味着您正在尝试选择 li 的子元素带有 id #sidebaritem。所以你可以做 li#sidebaritem 或者如果 id 不是唯一的 li.sidebaritem

所以你应该尝试:

<li class="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li>

和

$(document).ready(function(){
  $('li.sidebaritem a').click(function() {
     $("#your-main-container").load($(this).attr('href'));
     return false; //prevent click from redirection
  });
});

关于SEO部分:

这些链接对 SEO 不友好，因为它们不包含页面标题/描述的关键字(据我所知)。要提高网站在搜索引擎中的性能，您需要将它们替换为类似 /cat/this-is-my-amazing-seo-friendly-page/ 的内容。因此，您可能希望将页面的 url(将从标题呈现)替换为 SEO 友好的 .这里有一小段代码可以完成这项工作。

function replaceLink($url) {
      $url = preg_replace("/[^a-zA-Z0-9\-\s]/", '', $url); //find any other symbols than letters or numbers and replace them with an empty string
      $url = preg_replace("/\s+/", '-', $url); //find all spaces and replace them with a dash
      return $url;
    }

因此，如果您有一个页面标题:这是我对 SEO 非常友好的页面，请像这样将其传递到这个小函数中:

$link = replaceLink("This is my amazing SEO friendly page");

你会得到This-is-my-amazing-SEO-friendly-page

显然，这只是改进现场搜索引擎优化的基础之一。您可以阅读更多关于现场 seo here

还有。从搜索引擎的 Angular 来看，只要菜单中指定了真正的链接并且它们在没有启用 JavaScript 的情况下工作，您的 AJAX 页面加载就不会受到影响。

希望对你有帮助