因为做Silverlight的原因，已经很久没有接触过时下流行的WebUI设计方法了，于是来学习一下JQuery的东西，这东西确实比较强大，闲话不扯，下面是做的一个多个样式之间切换的小例子，做个笔记。
例子中唯一需要想想的就是如果是在多个样式表之间切换需要将原来的样式全部清除，否则样式会叠加。
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>JQuery学习之样式表切换</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //定义要切换的样式表 var sts=new Array('st1','st2') function ChangeStyle(StID) { var div1 = $("#test1"); //遍历样式表进行清空样式操作 for (var i = 0; i < sts.length; i++) { if (sts[i]!=StID) {
//如果存在样式 if (div1.hasClass(sts[i])) {
//移除样式 div1.removeClass(sts[i]); } } }
//div1.addClass(StID); div1.toggleClass(StID); } </script> <style type="text/css"> .st1 { font-size:5px; background-color:blue; } .st2 { font-size:22px; font-family:SimHei; background-color:green; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="test1" style="height:100px;"> Hello!</div> <input type="button" value="切换样式1" onclick="ChangeStyle('st1')" /> <input value="切换样式2" onclick="ChangeStyle('st2')" /> </div> </form> </body> </html>