手记

jquery搞定换皮肤

<body>

<p>
            <table id="table_1" bgcolor="#8080C0">
               
                <tr>
                    <td><fieldset>
                姓名:<input type="text" name="name" id="name"><p></p>
                电话:<input type="text" name="phone" id="phone"><p></p>
                email:<input type="text" name="mail" id="mail">
               </fieldset> </td>
            <td>
                 <div id="color_1" ></div>
            <div id="color_2" color: rgb(66, 133, 244);" href="file:///C|/Users/Feel~worlD/Desktop/angle/anglebb——2.jpg);width:100px;height:20px">.jpg);width:100px;height:20px"></div>                  //这里放置你的图片
            <div id="color_3" ></div>
            <div id="color_4" ></div>
            </td>
            <td>
           
                <button id="1">金黄色</button><br>     //5个按钮
                <button id="2">人物类</button><br>
                <button id="3">纯黑色</button><br>
                <button id="4">纯绿色</button><br>
                <button id="5">默认色</button><br>
            </td>
            </tr>
            </table></p>

 

<script type="text/javascript" language="javascript">

                      $("#1").click(function(){          //利用jquery的{“#”}获取相应的按钮id
                                
                                $("#table_1").css({         //利用css函数调用背景
                                    
                                    background:"#fFFF00" });   //以下相同
                      
                      }); 

                        $("#2").click(function(){
                               
                                $("#table_1").css({
                                   
                                background:"url(你的图片.jpg)" });
                     
                      });

                         $("#3").click(function(){
                               
                                $("#table_1").css({
                                   
                                    background:"#000000" });
                     
                      });
                     
                     
                       $("#4").click(function(){
                               
                                $("#table_1").css({
                                   
                                    background:"#00CC00" });
                     
                      });


                         $("#5").click(function(){
                               
                                $("#table_1").css({
                                   
                                    background:"#8080C0" });
                     
                      });

</script>


</body>

0人推荐
随时随地看视频
慕课网APP