码迷,mamicode.com
首页 > Web开发 > 详细

jQuery点击变色的效果

时间:2014-08-02 12:36:33      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   cti   ar   

  • jQuery 点击变色效果的代码实现,点击后文字所在方框的背景会变色,至于变成什么颜色,随你了,本代码的重点是效果的实现,并不局限于细节。

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>接触角测定仪</title>
</head>
<style type="text/css">
        #t1,#t2,#t3,#t4{
            height:30px;
            width:50px;
            background-color:#33FFFF;
            float:left;
            margin-left:50px;
            text-align:center;
        }
        .active{background-color:#FC5A0A!important;}
    </style>
    
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    <script type="text/javascript">
        jQuery(function(){
            var list = jQuery(#t1, #t2, #t3, #t4);
            list.click(function(){
                list.removeClass(active);
                jQuery(this).addClass(active);
                return false;
            });
        });
    </script>
    <body>
        <div id="t1"><a href="#">1</a></div>
        <div id="t2"><a href="#">2</a></div>
        <div id="t3"><a href="#">3</a></div>
        <div id="t4"><a href="#">4</a></div>
    </body>
</html>

 

jQuery点击变色的效果,布布扣,bubuko.com

jQuery点击变色的效果

标签:style   blog   http   color   java   io   cti   ar   

原文地址:http://www.cnblogs.com/youtianxia/p/3886673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!