zoukankan      html  css  js  c++  java
  • Jquery实现对a标签改变选中的背景色 支持多选 再次点击背景色消失

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .lanse
            {
                background-color: Blue;
            }
            .baise
            {
                background-color:White;
            }
        </style>
        <script src="../Js/jquery-last.js" type="text/javascript"></script>
        <script type="text/javascript">
            function dqxuanzhong(hh, id) {
                var a = $('#hid_msgdq').val();
                //            var newaa = a + id + ',';
                var newaa = a;
                var strs = new Array(); //定义一数组
                strs = newaa.split(","); //字符分割     
                var newa = "";
                var flag = true;
                if (strs.length > 0) {
                    for (var i = 0; i < strs.length; i++) {
                        if (strs[i] != "") {
                            if (strs[i] == id) {
                                $('#' + hh).addClass("baise"); //点击后的颜色在这里改就好了
                                newa = newa + "";
                                flag = false;
                            }
                            else {
                                $('#dq_' + strs[i]).addClass("lanse");
                                newa = newa + strs[i] + ',';
                            }
                        }
                    }
                    if (flag) {
                        newa = newa + id + ',';
                        $('#dq_' + id).addClass("lanse");
                        $('#hid_msgdq').val(newa);
                    } else {
                        $('#hid_msgdq').val(newa);
                    }
                } else {
                    $('#hid_msgdq').val(id + ',');
                }
                alert($('#hid_msgdq').val());
            }
            function msxuanzhong(o, id) {
                var a = $('#hid_msgms').val();
                //            var newaa = a + id + ',';
                var newaa = a;
                var strs = new Array(); //定义一数组
                strs = newaa.split(","); //字符分割     
                var newa = "";
                var flag = true;
                if (strs.length > 0) {
                    for (var i = 0; i < strs.length; i++) {
                        if (strs[i] != "") {
                            if (strs[i] == id) {
                                $('#' + o).addClass("baise"); //点击后的颜色在这里改就好了
                                newa = newa + "";
                                flag = false;
                            }
                            else {
                                $('#ms_' + strs[i]).addClass("lanse");
                                newa = newa + strs[i] + ',';
                            }
                        }
                    }
                    if (flag) {
                        newa = newa + id + ',';
                        $('#ms_' + id).addClass("lanse");
                        $('#hid_msgms').val(newa);
                    } else {
                        $('#hid_msgms').val(newa);
                    }
                } else {
                    $('#hid_msgms').val(id + ',');
                }
                alert($('#hid_msgms').val());
            }
        </script>
    </head>
    <body>
        <input type="hidden" id="hid_msgdq" value="" />
        <input type="hidden" id="hid_msgms" value="" />
        <div>
            <a id="dq_1" href="javascript:dqxuanzhong('dq_1',1)">北京</a> <a id="dq_2" href="javascript:dqxuanzhong('dq_2',2)">
                上海</a>
        </div>
        <div>
            <a id="ms_3" href="javascript:msxuanzhong('ms_3',3)">美食</a> <a id="ms_4" href="javascript:msxuanzhong('ms_4',4)">
                网购</a>
        </div>
    </body>
    </html>

  • 相关阅读:
    Light oj 1197
    UVA 11426 GCD
    Light oj 1236
    Light oj 1138
    Light oj 1214-Large Division (同余定理)
    Light oj 1234
    HDU
    ZOJ 3469 Food Delivery(* 区间DP 总结)
    二分查找整理
    zoj 3965 Binary Tree Restoring(* dfs)
  • 原文地址:https://www.cnblogs.com/weiying/p/weiying_10_29.html
Copyright © 2011-2022 走看看