禁用JavaScript时使信息可用_Javascript_Jquery_Html

禁用JavaScript时使信息可用

javascript jquery html

禁用JavaScript时使信息可用,javascript,jquery,html,Javascript,Jquery,Html,当禁用JavaScript时，是否有一种方法可以使使用jQuery/JavaScript的网页的内容可见当我单击h2标题时，div标记中的信息将使用jQuery显示功能。我已经包含了一个noscript标记，用于显示禁用的javaScript。我可以在javaScript关闭时显示标题中的信息吗多谢各位 <h1>CLICK ON AN ITEM TO VIEW INFORMATION (Scroll down to view)</h1> <h2 data-ty

当禁用JavaScript时，是否有一种方法可以使使用jQuery/JavaScript的网页的内容可见

当我单击h2标题时，div标记中的信息将使用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>

单击项目以查看信息（向下滚动以查看）
披萨
三明治
其他项目
饮料
披萨




经典：
牛肉、意大利香肠、洋葱和蘑菇
(10")$11.40   (12") $14.55


宫殿：
香肠、牛肉、意大利香肠、洋葱和蘑菇
（10）11.40美元（12）14.55美元


费城牛排：
调味牛排配洋葱、青椒和我们的特制白汁（10“）$11.40（12“）$14.55


“B”特别节目：
香肠、意大利腊肠、加拿大培根和洋葱
（10）11.40美元（12）14.55美元


特立独行：
香肠、牛肉、加拿大培根和意大利香肠
(10") $11.40   (12") $14.55

$（文档）.ready（函数（）{
$（“h2”）。在（'click'，function（）上{
var id=$（this.attr（“数据类型”）；
$（“.hidden”）.hide（）；
$（“#”+id+）.toggle（）；
});
});
您的浏览器不支持JAVASCRIPT！

也许吧

这是一个非常模糊的问题。网站是用JS动态生成的吗？那就不行了

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

您可以在要显示信息的位置使用

标记

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

Oops！！我们检测到Javascript被禁用，，
建议您打开它！！

您可以采用几种合适的方法

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

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

<html class="no-js">

这是现代化者所使用的东西。这样就可以为js和非js用户编写不同的css

一个粗略的例子：

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

body { background:#EEE; }

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

等等

编辑

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

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

好的，看看这把小提琴：

这是新的js

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

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

总是有noscript标记