《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.2 示例:移除类

简介: removeClass()函数的工作方式与addClass()相同。一个常见的使用示例是隐藏只有当JavaScript可用的时候才会使用的HTML元素。代码清单3-2演示了如何在文档刚加载完时移除no-js类。

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.2节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

3.2 示例:移除类

removeClass()函数的工作方式与addClass()相同。一个常见的使用示例是隐藏只有当JavaScript可用的时候才会使用的HTML元素。代码清单3-2演示了如何在文档刚加载完时移除no-js类。

代码清单3-2 在JavaScript不可用时隐藏HTML内容

00 <!DOCTYPE html>
01 
02 <html lang="en">
03 <head>
04  <title>The removeClass() function</title>
05  <style>
06   .no-js {
07   display: none;
08  }
09  </style>
10 </head>
11 <body>
12  
13 <p>This page contains both text that is always 
14  available and text that is only visible when 
15  JavaScript is available</p>
16 
17 <p class="no-js">This could be a part of the site that
18   is JavaScript dependent and is better hidden when 
19   JavaScript is unavailable.</p>
20 
21 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
22 
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26 
27  $('.no-js').removeClass('no-js');
28  
29  // removeClass()也可以没有参数; 
30  // 但这会把元素上别的类也移除
31  //
32  // $('.no-js').removeClass();
33 
34 });
35 </script>
36 </body>
37 </html>

还有另外一种方法,可以使用noscript元素,它的内容只会在JavaScript不可用时显示。

相关文章
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1212 0
|
6月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
8月前
|
Web App开发 前端开发 开发者
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
32 1
|
8月前
|
JavaScript
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
|
8月前
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
|
8月前
|
JavaScript
jquery多图片上传预览demo效果示例(整理)
jquery多图片上传预览demo效果示例(整理)
|
8月前
|
JavaScript
jquery上传头像demo效果示例(整理)
jquery上传头像demo效果示例(整理)
|
8月前
|
JavaScript
通俗易懂的jquery倒计时demo效果示例(整理)
通俗易懂的jquery倒计时demo效果示例(整理)
|
8月前
|
JavaScript
jquery模糊查询--搜索demo效果示例(整理)
jquery模糊查询--搜索demo效果示例(整理)