有时候需要添加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>