• JQuery基础学习(一) 实现元素在两个或者多个不同样式Calss之间切换


    因为做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>
  • 相关阅读:
    windows 乱码之 gbk 与 cp936
    jdcli 在命令行反编译jar包
    建议博客园向独立博客提供发布到首页的服务
    IsByRef在什么情况下为true?
    Hibernate里自定义UserType时取不到值的问题
    解决安装Visual Studio 2010 SP1时被NDP40KB2468871.exe补丁卡死以及mscorsvw.exe进程CPU占用率高的问题
    FROM WAS7/JDK5 TO WAS6/JDK4
    C++山寨C#中的DataTable
    程序员的自我修养读书笔记
    Web开发之路
  • 原文地址:https://www.cnblogs.com/FirstCode/p/2935338.html
Copyright © 2020-2023  润新知