一直纠结的菜单选中变色问题终于用Jquery实现了

　　8-14，以前曾今写过一个菜单选中变色，用的是js，写的比较繁琐，最后还没实现，留下阴影，今天终于用jquery实现了，具体也很简单，就当练笔了。

　　图是这样的，看上去很粗糙。

　　主要就3段代码，CSS，html和javascript。

<!--CSS代码-->
<style type="text/css">
        ul
        {
            text-decoration: none;
            list-style-type: none;
        }
        ul li
        {
             250px;
        }
        ul li div
        {
            padding-left: 2px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: normal;
            background-color: Gray;
            color: White;
            cursor: pointer;
        }
        
        ul li .div0
        {
            font-size: 16px;
            font-weight: 800;
        }
        ul li .div0:hover
        {
            font-size: 18px;
            font-weight: 900;
            background-color: Silver;
            color: Green;
        }
        ul li .div1
        {
            padding-left: 30px;
        }
        ul li .div1:hover
        {
            font-size: 16px;
            font-weight: 800;
            background-color: Silver;
            color: Green;
        }
        .div1Selected
        {
            font-size: 16px;
            font-weight: 800;
            background-color: Silver;
            padding-left: 30px;
            color: Green;
        }
        .div0Selected
        {
            font-size: 18px;
            font-weight: 900;
            background-color: Silver;
            color: Green;
        }
        .divMenu
        {
            float: left;
            margin: 5px 0 0 4px;
        }
    </style>

<!--html代码-->
    <div class="divMenu">
        <ul id="ulMenu">
            <li>
                <div id="div0" class="div0">
                    list-style-type：参数</div>
            </li>
            <li>
                <div class="div1">
                    disc：圆形</div>
            </li>
            <li>
                <div class="div1">
                    circle：空心圆</div>
            </li>
            <li>
                <div class="div1">
                    square：方块</div>
            </li>
            <li>
                <div class="div1">
                    decimal：十进制数字</div>
            </li>
            <li>
                <div class="div1">
                    lower-roman：小写罗马数字</div>
            </li>
            <li>
                <div class="div1">
                    upper-roman：大写罗马数字</div>
            </li>
            <li>
                <div class="div1">
                    lower-alpha：小写希腊字母</div>
            </li>
            <li>
                <div class="div1">
                    upper-alpha：大写希腊字母</div>
            </li>
            <li>
                <div class="div1">
                    none：无符号显示</div>
            </li>
        </ul>
    </div>

<!--javascript代码-->
    <script type="text/javascript">
        var ulMenuJQ = $("#ulMenu");
        $("#ulMenu>li>div").each(function () {
            var divJQ = $(this);
            divJQ.bind("click", function () {
                $("#ulMenu>li>div").each(function () {
                    var mm = $.trim($(this).attr("class"));
                    if (mm == "div0Selected") {
                        $(this).removeClass("div0Selected");
                        $(this).addClass("div0");
                    }
                    if (mm == "div1Selected") {
                        $(this).removeClass("div1Selected");
                        $(this).addClass("div1");
                    }
                });
                if ($.trim(divJQ.attr("class")) == "div1") {
                    divJQ.removeClass("div1");
                    divJQ.addClass("div1Selected");
                }
                if ($.trim(divJQ.attr("class")) == "div0") {
                    divJQ.removeClass("div0");
                    divJQ.addClass("div0Selected");
                }
            });
        });
    </script>

　　做完了，发现还是值得高兴的。