noscript 标签，如果未启用，我需要提供替代 html答案

【问题标题】：noscript tag, I need to present alternative html if not enablednoscript 标签，如果未启用，我需要提供替代 html
【发布时间】：2009-01-28 17:16:03
【问题描述】：

如果用户的浏览器没有启用 JavaScript，是否可以用 HTML 替换 javascript？

我知道我可以使用<noscript>this displays in place of javascript</noscript>

这很好，但它仍然运行 javascript。

理论上我会想要这个：

如果启用了 javascript
运行javascript

如果 javascript 未启用
不要运行 javascript 并提供替代方法

我正在使用这个 jQuery 插件：http://malsup.com/jquery/cycle/int2.html

当我在 safari 上禁用 javascript 时，它会显示所有三个项目，都在一个 div 中。该插件淡入每个项目，但禁用它会连续显示所有三个项目，而不会像启用 javascript 那样淡入和淡出。

禁用 javascript 后，我想阻止它同时显示所有三个项目。我将向您展示它的外观以及禁用 JavaScript 时的作用。

禁用视图：http://i42.tinypic.com/212y1j6.png（请注意它们 3 堆叠在彼此之上） - 由于 JavaScript 已禁用，我想阻止这种情况发生

启用视图：http://i39.tinypic.com/9gwu3d.png

这是项目所在的 div 的代码：

$(document).ready(function() {
    $('#featured-programs-left').cycle({ 
        fx:     'fade', 
        speed:  'slow',
        timeout: 15000,
        next:   '#next2',
        prev:   '#prev2' 
    });
});

<div id="featured-programs-left">

<div>
    <a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Emergency Medical Technician - Paramedic"><img src="http://site.com/images/uploads/images/emt.jpg" alt="Emergency Medical Technician - Paramedic" /></a>
    <strong>Emergency Medical Technician - Paramedic</strong>
    <p>This unique A.A.S. degree program, a partnership between College and Faxton-St. Luke&#8217;s Healthcare provides the paramedic student the education necessary to function in an</p> 
    <p><a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Learn more about Emergency Medical Technician - Paramedic">Learn more</a></p>
</div>

<div>
    <a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Travel &amp; Tourism: Hospitality &amp; Events Management"><img src="http://site.com/images/uploads/images/hospitality_event_planning.jpg" alt="Travel &amp; Tourism: Hospitality &amp; Events Management" /></a>
    <strong>Travel &amp; Tourism: Hospitality &amp; Events Management</strong>
    <p>This program prepares students for exciting careers in the travel and tourism industry and the hospitality and events planning field. Graduates are prepared to:<br</p> 
    <p><a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Learn more about Travel &amp; Tourism: Hospitality &amp; Events Management">Learn more</a></p>
</div>

<div>
    <a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Fashion Buying &amp; Merchandising"><img src="http://site.com/images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying &amp; Merchandising" /></a>
    <strong>Fashion Buying &amp; Merchandising</strong>
    <p>This program prepares graduates for careers throughout the Fashion Industry including positions in buying, fashion merchandising, retail and wholesale sales, retail</p> 
    <p><a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Learn more about Fashion Buying &amp; Merchandising">Learn more</a></p>
</div>

</div>

div 的 CSS

#featured-programs-left img,
#featured-programs-right img{
    xfloat:left;
    overflow:auto;
    xclear:left;
    xwidth:351px;
    xpadding:0 5px 5px 0;
    border:0;
}

#featured-programs-left,
#featured-programs-right {
    height:625px;
    float:left;
    overflow:auto;
    clear:left;
    clear:right;
    width:100%;
    xborder:2px solid red;
}

#featured-programs-left div,
#featured-programs-right div {
    xborder:1px solid purple;
    overflow:auto;
    clear:left;
    clear:right;
    width:352px;
    height:345px;
}

#featured-programs-left {
    float:left;
}

【问题讨论】：

问题不是很清楚。标题表明您已经知道 noscript 标签，这似乎可以满足您的需求。如果显示 noscript 内容，则不会执行 javascript。也许你想要实现的一些更具体的细节？

标签： javascript html detect

【解决方案1】：

有点像Ates's solution，您可以使用 Javascript 为启用它的用户更改内容。例如，假设您有一个精美的菜单，它为 Javascript 用户提供超级简单的导航，但对非 JS 用户毫无价值。在 HTML 中将显示属性设置为“无”，然后使用 JS 启用它。在您的情况下，如果您有不想向非 JS 用户显示的内容，您可以默认隐藏它。缺点是如果浏览器关闭了 JS 和 CSS，这将不起作用。如果你担心这个，你可以使用 JS 来插入内容。

<html>
<head>
  <script>
    $(document).ready(function() {
      $('.jsok').show();
    });
  </script>
  <style>
    .jsok { display: none; }
  </style>
 </head>
 <body>
   <div class="jsok"><!-- content for JS users here--></div>
   <div><!-- content for everyone here --></div>
   <noscript><!-- content for non-js users here --></noscript>
 </body>
 </html>

【讨论】：

【解决方案2】：

使用<noscript> 的替代方法是在页面加载后立即使用JavaScript 隐藏某个元素。如果 JavaScript 被禁用，该元素将保持显示状态。如果启用了 JavaScript，您的脚本将被执行并且元素将被隐藏。

window.onload = function () {
    document.getElementById("no_script").style.display = "none";
}

<div id="no_script">
You don't have JavaScript enabled.
</div>

更新

如果你想做相反的事情（启用 JavaScript 时显示一些 HTML），你总是可以使用各种方法将新元素注入 DOM 树。这是一个：

$(document).ready(function() {
    $('#container').html($('#content').html());
});

<div id="container"></div>
<script type="text/html" id="content">
    <div>Your <em>HTML</em> goes here</div>
</script>

感谢John Resig <script type="text/html"> 将 HTML 模板隐藏在 HTML 中的技巧。浏览器显然不会执行或呈现非传统类型的 <script> 内容。

【讨论】：

虽然这绝对是一个合适的后备计划（虽然你真的不应该需要一个；noscript 实际上是通用的），但你要小心，因为这可能会使你的页面在它会隐藏有问题的元素。
我想做与你创建的相反的事情。所以如果启用了javascript，我想显示代码。
问题标题与您刚才所说的相反。您可能需要重新表述这个问题。

【解决方案3】：

如果启用脚本，它将运行脚本。如果您想暂存

【讨论】：