JQuery实现switch开关

实现效果为如下的选择开关

首先在布局上，可以清晰看到最外层一个div包裹，内部两个div组成，然后两个div内部分别包裹了span用于显示开关上的文字，html代码如下：

      <div class="switch-container">
            <div class="switch-btn left-btn">
                <span class="btn-text">日同比</span>
            </div>
            <div class="switch-btn right-btn">
                <span class="btn-text">周同比</span>
            </div>
        </div>

对于该样式的布局实现css如下：

* {
                margin: 0;
                padding: 0;
            }

            .switch-container{
                width: 120px;
                height: 20px;
                background-color: gray;
                border-radius: 35px;
                line-height: 20px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -10px;
                margin-left: -60px;
                border: 1px solid gray;
            }
            .switch-btn{
                width: 50px;
                height: 100%;
                background-color: white;
                border-radius: 35px;
                font-size: 9px;
                line-height: 20px;
                text-align: center;
                color: #666666;
                cursor: pointer;
            }
            .left-btn {
                float: left;
            }
            .right-btn{
                float: right;
            }
            .btn-text{
                line-height: 20px;
            }
            .active-btn{
                background-color: #bfa;
            }

 

这里实现的方式是通过添加和删除类名：

<script src="jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

<script>
        $(function() {
            //一开始默认选中
            $('.left-btn').addClass('active-btn')
            $('.switch-btn').on('click',function(){
                $(".switch-btn[class*='active-btn']").removeClass("active-btn");
                $(this).addClass('active-btn')
            })
        });
    </script>

 

当然，这里只是简单的实现了功能，在样式上有修改的再另行修改，后续继续优化。