2015-05-06 2 views
-2

есть ли способ, которым я могу сделать содержимое веб-страницы, которая использует jQuery/JavaScript для просмотра, когда JavaScript отключен?Сделать доступной информацию, если 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> 
+0

Всегда есть тег noscript – Rooster

ответ

1

Есть несколько приличных методики вы можете использовать.

Как правило, чтобы контент отображался не пользователем js, он должен быть установлен для отображения в css и только скрыт, если js включен. Это означает, что все содержимое можно прочитать и проиндексировать (это также хорошая практика для людей, использующих программы чтения с экрана).

Чтобы добавить эту технику, вы можете добавить тег в HTML или тело

<html class="no-js"> 

И тогда в вашем JavaScript есть этот класс удален. Пример jquery:

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

Это что-то, что использует modernizr. Это позволяет вам писать разные css для пользователей js и non js.

Сырой пример:

body { background:#EEE; } 

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

И так далее.

EDIT

Проверили вы код с JS отключен? Поскольку в вашем примере нет css, это может работать нормально.

Еще один способ, который может помочь вашему коду, - сделать привязку тегов h2 и показать им связанный контент через jquery, но для пользователей, не являющихся js, они могут перейти к соответствующему разделу с помощью тега id, например закладки. Я постараюсь скоро выпустить скрипку.

OK взглянуть на эту скрипку: 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, весь контент будет виден и ссылки перейдут в соответствующие разделы.

+0

Спасибо за ваш ответ – CV88

2

Может быть?

Это очень неопределенный вопрос. Является ли сайт динамически созданным с помощью JS? Тогда нет.

Вы хотите показать что-то только в том случае, если JS не работает? Используйте тег noscript.

0

Вы можете использовать <noscript> тега, где вы хотите, чтобы показать информацию

<noscript>Oops!! We detected that Javascript is disabled,, 
You are advised to turn it on !! </noscript> 
Смежные вопросы