指令码的标签，我需要提出替代HTML，如果没有启用

https://stackoverflow.com/questions/488492

20-08-2019
|

题

是否有可能取代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>

CSS为div的

#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;
}

解决方案

有点像阿泰的溶液，您可以使用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>

其他提示

使用<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>

更新

如果你想要做的相反（显示一个HTML位的浏览器支持JavaScript时），你可以随时注入新元素使用各种方法的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>

奖励到约翰·雷西格，在<script type="text/html">特技为不引人注意地内部隐藏的HTML模板HTML。浏览器显然不执行或呈现的非传统型的<script>内容。

如果脚本被启用它将运行的脚本。如果你想在舞台