JS/jQuery添加和移除CSS样式

有时候需要添加CSS样式和移除CSS样式,如添加display属性,设为隐藏。有时候需要移除display属性。

一、jQuery移除CSS样式的两种方法

注意:当其中一种不支持时,就尝试另一种:

$("#show").removeAttr("style"); 
$("#show").attr("style","");

二、JS/jQuery添加或移除CSS样式

//通过JS添加样式+移除样式
document.getElementById('tab1').style.display="none";
document.getElementById("tab1").removeAttribute("style");//通过jQuery添加样式+移除样式
// $("#tab1").css("display","none");
// $("#tab1").removeAttr("style","");

三、实例

<!doctype html>
<html>
<head><meta charset="utf-8"><title>信息管理</title><!--通知ie使用最新内核--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--响应式,约束缩放--><meta name="viewport" content="width=device-width, maxinum-scale=1,user-scalable=no,initial-scale=1"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>body{ background:#eee;}#main{ max-width:640px; font-family:"微软雅黑"; }/*头部*/.tou{ background:#fff; margin-top:20px; padding-top:13px; padding-bottom:13px;}/*头部左边*/.tou .tou-left{ margin-left:15px;}.tou .tou-left a{}.tou .tou-left img{ width:78px; height:78px;}/*头部右边*/.tou .tou-right{ position:relative; float:left; margin-left:20px;}.tou .tou-right h3{ font-size:18px; margin-top:3px; margin-bottom:8px;}.tou .tou-right p{ font-size:14px; color:#999; margin-bottom:5px;}.tou .tou-right .self-depart{ margin-bottom:0px;}/*采集和已采集连接*/.self-nav{ margin-top:20px; background:#fff; ;}.self-nav .col-xs-6{ padding-left:0; padding-right:0; margin-left:0; margin-right:0; }.self-nav .btn{ padding-top:10px; padding-bottom:10px;}/*采集列表*/.self-menu{ margin-top:20px; background:#fff;border-top:1px solid #fff; border-bottom:1px solid #fff; }.self-menu .self-menu-cont li{ border-bottom:1px solid #eee;}.self-menu .self-menu-cont li .self-danger{ background:#C00;}/*底部技术支持*/.self-footer{ margin-top:20px; background:#fff; padding-top:13px; padding-bottom:13px; }.self-footer p{ margin-bottom:0; font-size:12px; color:#666; text-align:center;}</style>
</head>
<body><div class=" container" id="main"><!--头部--><div class="row tou"><div class=" pull-left tou-left"><a href="./"><img src="" class="img-responsive"/></a></div><div class=" tou-right"><h3>张三</h3><p>微信号:zhangsan</p><p class="self-depart">部门:安全部</p></div></div><!--banner--><div class="row self-nav"><div class="col-xs-6"><a href="#tab1" class="btn btn-block btn-default" data-toggle="tab" id="send" onclick="hiddenTag()">信息列表</a></div><div class="col-xs-6"><a href="#tab2" class="btn btn-block btn-default" data-toggle="tab" onclick="showTag()">添加信息</a></div></div><!--菜单列表--><div class="row self-menu"><ul class="nav nav-pills nav-stacked self-menu-cont tab-pane active fade in" id="tab1"><li><a href="">信息列表<span class="badge pull-right">10</span></a></li><li><a href="">消息列表<span class="badge pull-right">10</span></a></li><li><a href="">留言列表<span class="badge pull-right">10</span></a></li><li><a href="">传达列表<span class="badge pull-right">10</span></a></li><li><a href="">通知列表<span class="badge pull-right">10</span></a></li></ul><ul class="nav nav-pills nav-stacked self-menu-cont tab-pane fade" id="tab2" style="display:none"><li><a href="">添加信息</a></li><li><a href="">添加消息</a></li><li><a href="">添加留言</a></li><li><a href="">添加传达</a></li><li><a href="">添加通知</a></li></ul></div></div>   
</body>
<script>function hiddenTag(){//通过JS添加样式+移除样式document.getElementById('tab1').style.display="block";document.getElementById('tab2').style.display="none";//通过jQuery添加类选择器和移除类选择器$("#add").removeClass("btn-primary");$("#add").addClass("btn-default");$("#send").removeClass("btn-default");$("#send").addClass("btn-primary");//通过jQuery添加样式+移除样式// $('#tab1').css("display","block");// $('#tab2').css("display","none");}function showTag(){//通过JS添加样式+移除样式document.getElementById('tab1').style.display="none";document.getElementById("tab2").removeAttribute("style");//通过jQuery添加类选择器和移除类选择器$("#send").removeClass("btn-primary");$("#send").addClass("btn-default");$("#add").removeClass("btn-default");$("#add").addClass("btn-primary");//通过jQuery添加样式+移除样式// $("#tab1").css("display","none");// $("#tab2").removeAttr("style","");}
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569858.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高效幂运算(JAVA)--拆分解法、二进制解法

高效幂运算 问题描述&#xff1a;假设有一机器能够存储这样一些大整数&#xff08;或有一个编译程序能够模拟它&#xff09;&#xff0c;求一个相对大的数字&#xff08;一般为400位左右&#xff09;的极大幂&#xff08;400位左右&#xff09; 显然我们可以使用Java内置函数p…

动态规划之背包问题(JAVA)

背包问题之前的C语言版本已经将思路解析的差不多&#xff0c;虽然还有些许错误需要改正&#xff0c;但大体思路是正确的&#xff0c;需要的读者请参阅动态规划之背包问题&#xff08;C语言&#xff09; 背包问题本身就是典型的动态规划问题&#xff0c;所以这里只给出动态规划…

PHP常量:define和const的不同之处

&#xff11;、定义   常量是一个简单的标识符。在脚本执行期间该值不能改变&#xff08;除了所谓的魔术常量&#xff0c;他们其实不是常量&#xff09;。常量默认大小写敏感。通常常量标识符总是大写的。   可以用define()函数来定义常量。在php5.3.0以后&#xff0c;可以…

js--a标签带参数href取值

<script type"text/javascript"> $(function(){ //$(div里面a标签的class名字)。attr&#xff08;‘href’&#xff0c;‘路径已经后面带的参数’&#xff09; $(.a).attr(href,/meeting/register_personal/findSeatPhoto.do?actionIdmeeting_register_detail…

斐波那契数列(一)--对比递归与动态规划(JAVA)

兔子繁殖问题&#xff1a; 这是一个有趣的古典数学问题&#xff0c;著名意大利数学家Fibonacci曾提出一个问题&#xff1a;有一对小兔子&#xff0c;从出生后第3个月起每个月都生一对兔子。小兔子长到第3个月后每个月又生一对兔子。按此规律&#xff0c;假设没有兔子死亡&…

MySQL中的char与varchar详解

mysql中char与varchar的区别 char&#xff1a;定长&#xff0c;效率高&#xff0c;一般用于固定长度的表单提交数据存储 &#xff1b;例如&#xff1a;身份证号&#xff0c;手机号&#xff0c;电话&#xff0c;密码等 varchar&#xff1a;不定长&#xff0c;效率偏低 …

C++初步学习

C语言的变量必须在函数开始定义&#xff0c;而C可以边使用变定义C不支持重载&#xff0c;C函数支持重载&#xff0c;函数参数数量不同 或者 函数参数类型不同即可重载C的命名空间C语言不允许使用空的结构体(struct)&#xff0c;C允许使用空的结构体(class)C面向过程&#xff0c…

排序算法(一)--桶排序、冒泡、快排(JAVA)

排序算法汇总 参考书籍–《啊哈&#xff01;算法》 作者&#xff1a;啊哈磊 首先提出一个问题&#xff1a;班内有5名同学&#xff0c;成绩分别为5&#xff0c;8&#xff0c;2&#xff0c;4&#xff0c;2分&#xff08;满分10分&#xff09;&#xff0c;需要将成绩从小到大排序…

apache启动错误 AH00072: make_sock: could not bind to address [::]:443

一、安装apche遇到问题 在电脑上win7系统中安装了wnmp&#xff08;nginxMySQLphp7.2&#xff09;后&#xff0c;想要在安装一套wamp&#xff08;apacheMySQLphp7.2&#xff09;。说做就做&#xff0c;wamp的安装就比较简单了&#xff1a;首先&#xff0c;直接下载apache的压缩包…

Page9:结构分解以及系统内部稳定和BIBO稳定概念及其性质[Linear System Theory]

内容包含系统能控性结构分解、系统能观测性结构分解以及系统结构规范分解原理&#xff0c;线性系统的内部稳定、BIBO稳定概念及其性质 转载于:https://www.cnblogs.com/ERFishing/p/10314720.html

Java集合类及常用数据结构

下面这个图示为JAVA的集合类关系图&#xff0c;没用用严格的UML&#xff0c;了解其中的关系即可&#xff0c;其中颜色强调的几个类为常用的集合类。

win7添加开机启动项

添加开机启动项 开始菜单->所有程序->有个“启动”目录&#xff0c;然后右击选择“打开”&#xff0c;之后把软件的快捷方式移动到此目录下&#xff0c;然后重启电脑&#xff0c;就可以了。 注意&#xff1a;如果修改了程序的安装目录&#xff0c;这里需要删除之前的快捷…

续PA协商过程

续PA协商过程 当sw3的接口恢复之后会发生2中情况。 ①sw3的G0/0/2口先发BPDU ②sw3的G0/0/3口先发BPDU sw3先发送BPDU sw3和sw1的交互过程&#xff1a; sw3的2口恢复后&#xff0c;sw3的所有接口&#xff08;除了边缘端口&#xff09;&#xff0c;变为DP&#xff08;discardi…

搜索算法(一)--DFS/BFS求解拯救同伴问题(JAVA)

拯救同伴问题 问题描述&#xff1a;假设有如下迷宫&#xff0c;求解从某一点出发到目标位置的最短距离 Input: 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 1 1 1 4 3 Output: 7 深度优先搜索&#xff08;DFS&#xff09; import java.util.Scanner;public class DF…

PHP7.2的安装与配置(win7)

1、PHP的安装 1&#xff09;、环境安装目录&#xff1a; C:/wamp/|——php|——php7.2|——Apache24|——mysql|——www2&#xff09;、下载 linux专用&#xff1a;http://www.php.net/downloads.php windows专用&#xff1a;http://windows.php.net/download/ 官网里Windo…

常用类(二)

10.3 可变字符序列&#xff1a;字符串缓冲区 10.3.1 StringBuffer、StringBuilder、String的区别 1、一个类似于 String 的字符串缓冲区&#xff0c;但能被修改。虽然在任意时间点上它都包含某种特定的字符序列&#xff0c;但通过某些方法调用可以改变该序列的长度和内容&#…

搜索算法(二)--DFS/BFS求解炸弹人问题(JAVA )

炸弹人问题 问题描述&#xff1a;小人可以在迷宫中任意地方放置一个炸弹&#xff0c;炸弹可以在以该点为中心的十字方向杀死怪物&#xff0c;但是触碰到墙之后不再能传递攻击。求将一个炸弹放在哪个位置可以杀死更多的怪物&#xff1f;&#xff1f; Input&#xff1a; 13 1…

could not find driver和PDO drivers = no value

could not find driver 使用ThinkPHP5.0.20&#xff08;win7apache2.4.41 php7.2.21MySQL5.7&#xff09;连接MySQL数据库时&#xff0c;报错&#xff1a; 然后使用phpinfo();查看了一下扩展&#xff0c;发现了问题&#xff08;PDO drivers 的值为 no value&#xff09;&…

1090 Highest Price in Supply Chain (25 分)

1090 Highest Price in Supply Chain &#xff08;25 分&#xff09;A supply chain is a network of retailers&#xff08;零售商&#xff09;, distributors&#xff08;经销商&#xff09;, and suppliers&#xff08;供应商&#xff09;-- everyone involved in moving a …

搜索算法(三)--DFS/BFS求解宝岛探险问题(JAVA )

宝岛探险问题 问题描述&#xff1a;某片海域有诸多岛屿&#xff0c;用0表示海洋&#xff0c;1-9表示陆地&#xff0c;现给定一个岛屿上的坐标点&#xff0c;求解所在岛屿的面积 思路&#xff1a;显然这是一个搜索算法&#xff0c;即只要从当前坐标点开始遍历&#xff0c;每遍…