选项卡样式的JS与JQuery实现

鼠标滑动到对应分类，显示具体内容，通过js和jquery两种方式来实现，比较下实现的代码量。

页面内容：

    <div id="mainContent">
        <ul id="ulList">
            <li class="on">WinForm</li>
            <li>WebForm</li>
            <li>DataBase</li>
            <li>常用网址</li>
        </ul>
        <ol id="WinForm">
            <li>窗口间传值</li>
            <li>动态创建控件</li>
            <li>GDI+图形的绘制</li>
        </ol>
        <ol id="WebForm" style="display:none">
            <li>前后台的值传递</li>
            <li>水晶报表的模式</li>
            <li>GridView的分页</li>
        </ol>
        <ol id="DataBase" style="display:none">
            <li>select的多条件查询</li>
            <li>存储过程的使用</li>
            <li>事务管理机制</li>
        </ol>
        <ol id="常用网址" style="display:none">
            <li><a href="http://www.baidu.com">百度</a></li>
            <li><a href="http://www.sina.com.cn">新浪</a></li>
            <li><a href="http://www.csdn.net">CSDN</a></li>
        </ol>
    </div>

添加css样式：

    <style type="text/css">
        #mainContent {
            margin: 5px auto;
            width: 400px;
            height: 400px;
            background-color: aliceblue;
        }
        #ulList {
            list-style: none;
            padding: 0;
            width: 400px;
            height: 30px;
            /*border:1px solid #0094ff;*/
        }
            #ulList li {
                margin-top:10px;
                float:left;
                height:30px;
                width:100px;
                line-height:30px;
                text-align:center;
            }
       .on {
              background-color:yellow;
           }
        .off {
            background-color:aliceblue;
        }
        ol {
            position:relative;
            border:1px solid #eee;
            height:350px;
        }
            ol li {
                margin:5px;
            }
    </style>

实现滑动内容改变的js代码：

    <script type="text/javascript">
        window.onload = function () {
            var ulObj = document.getElementById("ulList");
            var menuLis = ulObj.children;
            for (var i = 0; i < menuLis.length; i++) {
                
                menuLis[i].onmouseenter = function ()
                {
                    resetMenuLiClass();
                    this.setAttribute("class", "on");
                    resetOlDisplay();
                    var strTab = this.innerText;
                    var olObj = document.getElementById(strTab);
                    olObj.style.display = "";
                }
                

            }

            function resetMenuLiClass()
            {
                for (var i = 0; i < menuLis.length; i++) {
                    menuLis[i].setAttribute("class", "off");
                }
            }

            function resetOlDisplay()
            {
                var olObjs = document.getElementsByTagName("ol");
                for (var i = 0; i < olObjs.length; i++) {
                    olObjs[i].style.display = "none";
                }
            }
            
        }
    </script>

同样的效果，改用JQuery实现，代码精简，且可读性更好：

    <script src="JS/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">

        //相当于window.onload = function () { }
        $(document).ready(function () {
            $("#ulList li").mouseenter(function () {
                $("#ulList li").removeClass("on");
                $(this).addClass("on");
                var olID = "#" + $(this).text();
                $("ol").css("display", "none");
                $(olID).css("display", "block");
            })
            
        })
    </script>

运行效果如下：