多个DIV类似radio单选效果

一、基本代码及效果

1.1 HTML代码

<div id="left">
    <div class="left1" id="2d"><img src="icon/2D-1.png">二维图表</div>
    <div class="left1" id="3d"><img src="icon/3D-1.png">三维图表</div>
    <div class="left1" id="title"><img src="icon/title.png">标题</div>
    <div class="left1" id="backgroundColor"><img src="icon/backgroundColor.png">背景颜色</div>
    <div class="left1"  id="grid"><img src="icon/grid.png">表格区域</div>
    <div class="left1"  id="axis"><img src="icon/axis.png">坐标轴</div>
</div>

1.2 CSS样式

//class名为left的div的位置、大小及颜色
#left{
    top:100px;
    position:fixed;
    background-color:#293C55;
    width:18%;
    left:0;
}

//class名为left1的div小的图片大小
.left1 img{
    height:24px;
    width:24px;
    padding:0 20px 0 20px;
}

//class名为left1的div的位置、大小及颜色
.left1{
    background-color:#293C55;
    color:#FFF;
    padding:5%;
    width:90%;
    font-family:"黑体", serif;
    font-size:24px;
}

//当鼠标在class名为left1上是，该div的颜色
.left1:hover{
    background-color:#0F1722;
}

1.3 效果

二、事件点击代码及效果

1.1 JS代码

$(function(){
    //同类div单选效果
    $(".left1").click(function (){//前提：div的class相同【left1】，id不同
        //设置当前点中div的背景颜色
        $(this).css("background-color","#E43C59");
        //获取当前点中div的id ==> id
        var id = $(this).attr("id");
        //将这几个div的class都设为left1,然后遍历这些div
        $("div[class='left1']").each(function() {
            //获取当前遍历div的id ==>id2
            var id2 = $(this).attr("id");
            //若选中id与遍历id不同，则将背景设置为另外一种颜色
            if(id != id2){
                $(this).css("background-color","#293C55");
            }
        });
    });
});

1.2 效果