草庐IT

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

coder 2024-02-28 原文

我有一个导航系统，我想使其与禁用 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 禁用机器上运行？

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

最佳答案

首先，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 页面加载就不会受到影响。

希望对你有帮助

关于php - HTML 导航、Ajax 但兼容 JavaScript 禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9692488/

JavaScriptHTMLsidebaritemcodesectionphpajaxseonavigation

有关php - HTML 导航、Ajax 但兼容 JavaScript 禁用的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML？ - 2

    是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案

  10. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

随机推荐