在禁用 JavaScript 时提供信息答案

【问题标题】：Make information available when JavaScript disabled在禁用 JavaScript 时提供信息
【发布时间】：2015-05-06 16:28:54
【问题描述】：

有没有一种方法可以在禁用 JavaScript 时使使用 jQuery/JavaScript 的网页内容可见？

当我单击 div 标签中的 h2 标头信息时，将使用 jQuery 显示功能。我已经包含了一个 noscript 标记来显示 JavaScript 被禁用。关闭 javaScript 时，是否可以显示标题中的信息？

谢谢

<h1>CLICK ON AN ITEM TO VIEW INFORMATION (Scroll down to view)</h1>
<h2 data-type="pizza">Pizza</h2>
<h2 data-type="sandwich">Sandwiches</h2>
<h2 data-type="other">Other Items</h2>
<h2 data-type="beverage">Beverages</h2>

 <div id="pizza" class="hidden">
 <h3>PIZZA </h3>
 <hr>
 <br>
 <p>
 <strong>Classic:</strong> 
 Beef, Pepperoni, Onions & Mushrooms &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10")$11.40 &nbsp; (12") $14.55
 </p>
 <p>
 <strong>Palace:</strong>
 Sausage, Beef, Pepperoni, Onions & Mushrooms&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10")&nbsp$11.40 &nbsp; (12") $14.55
 </p>
 <p>
 <strong>Philly Steak:</strong>
 Seasoned Steak with Onions, Green Peppers on our Special White Sauce &nbsp (10") $11.40 &nbsp; (12") $14.55 

 </p>
 <p>
 <strong>"B" Special:</strong>
 Sausage, Salami, Canadian Bacon & Onions &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10")&nbsp$11.40 &nbsp; (12") $14.55
 </p>
 <p>
 <strong>Maverick:</strong>
 Sausage, Beef, Canadian Bacon & Pepperoni &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10") $11.40 &nbsp; (12") $14.55
 </p>
 </div>

$(document).ready(function(){
  $("h2").on('click', function(){
  var id = $(this).attr("data-type");
  $(".hidden").hide();
  $("#"+id+"").toggle();
  });
});

<noscript>
YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!
</noscript>

【问题讨论】：

总有noscript标签

标签： javascript jquery html

【解决方案1】：

也许？

这是一个非常模糊的问题。网站是用JS动态生成的吗？然后没有。

你想只在 JS 不运行时显示一些东西吗？使用noscript 标签。

【讨论】：

【解决方案2】：

您可以采用几种不错的方法。

一般要让非js用户可以看到内容，在css中都应该设置为显示，并且只有在开启js时才隐藏。这意味着所有内容都可以阅读和索引（这对于使用屏幕阅读器的人来说也是一个很好的做法）。

要添加此技术，您可以在 html 或正文中添加标签

<html class="no-js">

然后在您的 javascript 中删除此类。 jQuery 示例：

$('html').removeClass('no-js');

这是modernizr 使用的东西。然后，这允许您为 js 和非 js 用户编写不同的 css。

一个粗略的例子：

body { background:#EEE; }

.no-js body { background:#FFF; }

等等。

编辑

您是否在禁用 js 的情况下测试了您的代码？由于您的示例中没有 css，因此它实际上可能正常工作。

另一种可能对您的代码有所帮助的技术是制作 h2 的锚标签并让它们通过 jquery 显示链接的内容，但对于非 js 用户，让他们通过 id 标签（如书签）跳转到相关部分。我会尽快尝试制作小提琴。

好的，看看这个小提琴：http://jsfiddle.net/lharby/w2mkem8k/

这是新的js。

$(".hidden").hide(); 
$("a").on('click', function(){
  var id = $(this).attr("href");
    $('.hidden').hide();
    $(id).show();
      return false;
  });

我已经把 h2 变成了锚。如果您禁用 javascript，则所有内容都可见，并且链接会跳转到相应的部分。

【讨论】：

【解决方案3】：

您可以在要显示信息的地方使用<noscript>标签

<noscript>Oops!! We detected that Javascript is disabled,,
You are advised to turn it on !! </noscript>

【讨论】：