javascript - 不使用 JavaScript 显示内容

Question

有没有一种方法可以让使用 jQuery/JavaScript 的网页内容在禁用 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

解决方案:使用 Progressive Enhancement 从头开始​​开发您的网站心里。

您可以通过将 h2 标记替换为链接到其他页面的 anchor 标记来应用此方法，这些页面上包含您的 div 内容。对于启用了 javascript 的客户端，将点击挂接到这些 anchor 上并显示预先存在的隐藏内容，或者使用 ajax 动态加载它。