点击进行多项选择（jQuery）

头部引用：

<link href="../ATheme/css/base.css" rel="stylesheet" />
<script src="../ATheme/js/jquery-1.8.3.min.js"></script>

html结构：

<body>
    <div class="main">
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>橘子</li>
            <li>番茄</li>
        </ul>
    </div>
</body>

　　base样式：

.main ul li {
    list-style-type: none;
    float: left;
    width: 4%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-left: 3.5%;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
}

.add {
    color: #2AC845;
    border: 1px solid #2AC845;
    border-radius: 10px;
}

　　JQuery：

$(function () {
            //第一种方法
            $(".main li").toggle(function () {
                $(this).addClass("add");
            }, function () {
                $(this).removeClass("add");
            });
            //第二种方法
            $(".main li").on("click", function () {
                var li = $(this);
                if (li.hasClass("add")) {
                    li.removeClass("add");
                } else {
                    li.addClass("add");
                }
            });

            //鼠标悬浮改变颜色
            $(".main li").hover(function () {
                $(this).addClass("add");
            }, function () {
                $(this).removeClass("add");
            })
        })

posted on 2017-08-17 17:14 Amberlyn 阅读(774) 评论(0) 收藏举报