noscript标记，如果未启用，我需要提供替代html [英] noscript tag, I need to present alternative html if not enabled
问题描述
如果在用户的浏览器上没有启用JavaScript，是否可以用javascript代替w / HTML？
我知道我可以使用< noscript>这个显示代替了javascript< / noscript>
这很好，但它仍然运行javascript。 b
$ b
理论上我会想要这样：
如果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'，
速度：'slow'，
超时：15000，
下一个：'＃next2'，
上一个：'＃prev2'
}）;
}）;
< div id =featured-programs-left>
< div>
< a href =http://site.com/academics/majors/emergency_medical_technician_-_paramedic/title =急救医疗技术人员 - 医务人员>< img src =http：// site。 com / images / uploads / images / emt.jpgalt =紧急医疗技术员 - 辅助医护人员/>< / a>
< strong>紧急医疗技术员 - 医务人员< / strong>
< p>这种独特的A.A.S.学位课程，学院与Faxton-St的合作关系。卢克医疗保健公司为医护人员提供必要的教育，以在< / p>
< p>< a href =http://site.com/academics/majors/emergency_medical_technical_-_paramedic/title =了解更多关于紧急医疗技术人员 - 辅助医护人员>了解更多信息< / a> ;< / p为H.
< / div>
< div>
< a href =http://site.com/academics/majors/travel_tourism_hospitality_events_management/title =旅游与旅游：款待与活动管理< img src = http://site.com/images/uploads/images/hospitality_event_planning.jpgalt =旅游与旅游：酒店与活动管理/>< / a>
< strong> Travel& amp; amp;旅游业：酒店和旅游业活动管理< / strong>
此计划为学生准备了令人兴奋的旅游和旅游业以及酒店和活动策划领域的职业生涯。毕业生准备：< br< / p>
< p>< a href =http://site.com/academics/majors/travel_tourism_hospitality_events_management/title =了解更多关于旅游与旅游：酒店与活动管理 >了解详情< / a>< / p>
< / div>
< div>
< strong> Fashion Buying& amp; amp; amp; amp; amp;销售< /强>
本计划为毕业生准备了整个时尚行业的职业生涯，包括购买，时尚推销，零售和批发销售，零售等职位。
< p>< a href =http://site.com/academics/majors/fashion_buying_merchandising/title =了解更多关于Fashion Buying& amp; Merchandising的信息>了解更多信息< / a> ;< / p为H.
< / div>
< / div>
为div的CSS
＃featured-programs-left img，
＃featured-programs-right img {
xfloat：left;
溢出：auto;
xclear：left;
xwidth：351px;
xpadding：0 5px 5px 0;
border：0;
}
＃featured-programs-left，
＃featured-programs-right {
height：625px;
float：left;
溢出：auto;
clear：left;
明确：正确;
宽度：100％;
xborder：2px纯红色;
}
＃featured-programs-left div，
＃featured-programs-right div {
xborder：1px solid purple;
溢出：auto;
clear：left;
明确：正确;
width：352px;
height：345px;
}
＃featured-programs-left {
float：left;
有点像Ates's解决方案，你可以使用Javascript来更改启用它的用户的内容。例如，假设您有一个花式菜单，它为Javascript用户提供超级简单的导航，但对非JS用户来说毫无价值。在HTML中将display属性设置为'none'，然后使用JS来启用它。在你的情况下，如果你有内容，你不想为非JS用户显示，你可以默认隐藏它。缺点是如果浏览器关闭JS和CSS，这将无法正常工作。如果您担心这一点，可以使用JS插入内容。
< html>
< head>
< script>
$（document）.ready（function（）{
$（'。jsok'）。show（）;
}）;
< / script>
< style>
.jsok {display：none; }
< / style>
< / head>
< body>
< div class =jsok><！ - 此处JS用户的内容 - >< / div>
< div><！ - 此处所有人的内容 - >< / div>
< noscript><！ - 此处非js用户的内容 - >< / noscript>
< / body>
< / html>
Is it possible to replace javascript w/ HTML if JavaScript is not enabled on the user's browser?
I know I can use <noscript>this displays in place of javascript</noscript>
That works fine, but it still runs the javascript.
In theory I would want this:
if javascript is enabled
run javascript
if javascript is not enabled
don't run javascript and give alternative method
I am using this jQuery plugin: http://malsup.com/jquery/cycle/int2.html
When I disable javascript on safari, it displays all three of the items, all within a div. The plugin fades in each item, but with it disabled it displays all three in a row, without fading in and out like it does w/ javascript enabled.
With javascript disabled, I would want to stop it from displaying all three items at the same time. I'll show you what it is suppose to look like and what it does when JavaScript is disabled.
Disabled view: http://i42.tinypic.com/212y1j6.png (notice them 3 stacked on top of eachother) - I want to stop that from happening since the JavaScript is disabled
Enabled view: http://i39.tinypic.com/9gwu3d.png
Here is the code for the div the items are in:
$(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’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 & Tourism: Hospitality & Events Management"><img src="http://site.com/images/uploads/images/hospitality_event_planning.jpg" alt="Travel & Tourism: Hospitality & Events Management" /></a>
<strong>Travel & Tourism: Hospitality & 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 & Tourism: Hospitality & Events Management">Learn more</a></p>
</div>
<div>
<a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Fashion Buying & Merchandising"><img src="http://site.com/images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying & Merchandising" /></a>
<strong>Fashion Buying & 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 & Merchandising">Learn more</a></p>
</div>
</div>
CSS for the div's
#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;
}
Somewhat like Ates's solution, you can use Javascript to change the content for the users who have it enabled. For example, let's say you have a fancy menu that gives Javascript users super-easy navigation, but is worthless to non-JS users. In the HTML set the display property to 'none' and then use JS to enable it. In your case, where you have content you don't want to show for the non-JS users, you can just hide it by default. The downside is if the browser has JS AND CSS turned off, this won't work. If you're worried about that, you could use JS to insert the content.
<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标记，如果未启用，我需要提供替代html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http ：//i39.tinypic.com/9gwu3d.png](\"http://i39.tinypic.com/9gwu3d.png\"){kind=link}
