利用bootstrap实现圆形按钮选中变色

最新推荐文章于 2024-05-10 03:05:44 发布

qq_37205838

最新推荐文章于 2024-05-10 03:05:44 发布

阅读量3.7k

点赞数

分类专栏： javascript 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_37205838/article/details/70158304

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载bootstrap包其他的都在代码中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
         <style type="text/css">
            body{
                text-align: center;
            }

            .btn-my { 
                 /*background: #cb60b3; Old browsers */ 
                /*background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); FF3.6+ */ 
                /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3),color-stop(50%, #ad1283), color-stop(100%, #de47ac) ); Chrome,Safari4+ */ 
                /* background : -webkit-linear-gradient( top, #cb60b3 0%,#ad1283 50%, #de47ac 100%);  Chrome10+,Safari5.1+ */ 
                /* background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);Opera 11.10+ */ 
                /* background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); IE10+ */ 
                /* background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%); W3C */ 
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3',endColorstr='#de47ac', GradientType=0 ); /* IE6-9 */ }
            .btn-my{ width: 55px; height: 55px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
            .active{
                background: forestgreen;
                color:#F8F8F8;
            }

         </style>

    </head>
    <body>
        <!-- 自定义按钮样式 --> 
        <button type="button" class="btn btn-my" name="one" id="5">5<br/>分钟</button>
        <button type="button" class="btn btn-my" name="one" id="10" >10<br/>分钟</button>

        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("[name=one]").click(function(){
                    alert(this.id);
                    //this可以获取当前点击按钮的id
                    if(this.className.indexOf('active')==-1){
                        this.className="active btn-my btn";
                        this.style="color: #FFFFFF;"
                    }else{
                        this.className=" btn-my btn";
                        this.style="color: #000000;"
                    }
                })
                $("[name=one]").blur(function(){
                    this.className="btn-my btn";
                    this.style="color: #000000;";
                })

            })

        </script>
    </body>
</html>