多个标签点击改变当前样式其他标签为原来样式------------多个标签点击改变样式再点击改变后样式的标签还原原来样式----------多选的样式及事件

整个代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <style>
        .paixu {
            cursor: pointer;
        }
        
        .orgtians {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        #orgname {
            width: 270px;
            height: 50px;
            border: 1px solid #e1e1e1;
        }
        
        .orgnumbs,
        .orghznumbs {
            width: 100%;
            height: 300px;
            margin-top: 20px;
            overflow-y: auto;
        }
        
        .orgbox {
            display: flex;
            flex-wrap: wrap;
        }
        
        .orgbox .firstBtn {
            width: 145px;
            height: 80px;
            margin: 5px 3px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6498f0;
            border: 1px solid #e1e1e1;
            cursor: pointer;
        }
        
        .bg_color {
            color: #00a09d !important;
            border: 1px solid #00a09d !important;
        }
        
        .st_color {
            color: #6498f0;
            border: 1px solid #e1e1e1;
        }
        
        .orgbox .firstBtn:hover {
            color: #00a09e;
            border: 1px solid #00a09e;
        }
        
        .orgspans {
            width: 29px;
            height: 29px;
            position: absolute;
            top: -6px;
            right: -4px;
            background-image: url(../images/yes.png);
        }
        /*全选的样式*/
        .agree {
            position: fixed;
            top: 60%;
            left: 0;
            width: 50%;
            text-align: center;
            line-height: 1.5rem;
            background: white;
        }
        
        .agree p {
            display: inline-block;
            display: inline-block;
            padding-top: 20px;
            padding-right: 8px;
            cursor: pointer;
        }
        
        .agree p:before {
            content: "";
            position: absolute;
            width: 27px;
            height: 27px;
            top: 50%;
            left: 31.5%;
            margin-top: -0.7rem;
            border: 0.1rem solid #e1e1e1;
        }
        
        .agree.on p:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 15px;
            top: 55%;
            border-top: 0.15rem solid #00a09e;
            border-left: 0.15rem solid #00a09e;
            -webkit-transform: rotate(225deg);
            -moz-transform: rotate(225deg);
            transform: rotate(225deg);
            left: 33%;
            margin-top: -0.62rem;
        }
    </style>
    <body>
        <div class="modal-content" style='width: 642px;'>
            <div class="modal-body">
                <form class="form-inline">
                    <div class='orgtians'>
                        <select id='orgname'>
                            <option value='0'>儿科</option>
                            <option value='1'>妇科</option>
                            <option value='1'>耳鼻喉科</option>
                        </select>
                        <p class='paixu'>职称排序 &nbsp;&nbsp;<img src='../framework/images/paixu.png'></p>
                    </div>
                    <div class="orgnumbs">
                        <div class='orgbox'>
                            <p class="firstBtn">医生姓名<span></span></p>
                            <p class="firstBtn">医生姓名<span></span></p>
                            <p class="firstBtn">医生姓名<span></span></p>
                            <p class="firstBtn">医生姓名<span></span></p>
                        </div>
                    </div>
                    <div class="modal-footer agree " style="text-align:center;">
                        <p id="iAgree" class="red">全选</p>
                        <button id='add' type="button" onclick='addCall()' class="btn btn-primary">添 加</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script>
    //全选事件
    function events() {
        $("#iAgree").click(function() {
            $(".agree").toggleClass("on");
            if($(".agree").hasClass('on')) {
                $('.orgbox .firstBtn').addClass('bg_color');
                $('.orgbox .firstBtn span').addClass('orgspans');
            } else {
                $('.orgbox .firstBtn').removeClass('bg_color');
                $('.orgbox .firstBtn span').removeClass('orgspans');
            }
        });
    }
    events()
    //选择多个再次点击还原样式
    $(".orgbox").delegate(".firstBtn", "click", function(e) {
        e.stopPropagation();
        var timeDivs = $('.orgbox .firstBtn');
        var timeSpan = $('.orgbox .firstBtn span');
        for(var i = 0; i < timeDivs.length; i++) {
            if($(this).is(timeDivs[i])) {
                $(timeDivs[i]).toggleClass('bg_color');
                $(timeSpan[i]).toggleClass('orgspans');
            }
        }
    });
    //只能选择一个其他还原样式
    /*$(".orgbox").delegate(".firstBtn", "click", function(e) {
        e.stopPropagation();
        var timeDivs = $('.orgbox .firstBtn');
        var timeSpan = $('.orgbox .firstBtn span');
        for(var i = 0; i < timeDivs.length; i++) {
            if($(this).is(timeDivs[i])) {
                $(timeDivs[i]).addClass('bg_color');
                $(timeSpan[i]).addClass('orgspans');
            }else{
                $(timeDivs[i]).removeClass('bg_color');
                $(timeSpan[i]).removeClass('orgspans');
            }
        }
    });*/
</script>

 

posted @ 2018-08-27 15:00  小凢  阅读(617)  评论(0)  编辑  收藏  举报