zoukankan      html  css  js  c++  java
  • 一直纠结的菜单选中变色问题终于用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>
    View Code
    <!--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>
    View Code
    <!--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>
    View Code

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

  • 相关阅读:
    XMIND
    android studio 更新 Gradle错误解决方法
    解决下载Android Build-tools 19.1.0失败
    Android Studio怎么删除项目
    android studio 更改背景和设置字体大小
    IOS开发常用技术网站
    Gitbook安装
    深入解析AsyncTask(转)
    Android中Bitmap和Drawable(转)
    提高Android在eclipse下的编译速度
  • 原文地址:https://www.cnblogs.com/gzbnet/p/3257520.html
Copyright © 2011-2022 走看看