Question

有什么方法可以在禁用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>

Answer 1

也许？

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

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

Answer 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，则所有内容都可见，并且链接会跳转到相应的部分。

Answer 3

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

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

禁用JavaScript时提供信息

3 个答案: