javascript滑动门的实现方法和案例

首先我们知道js滑动门的三种实现思路：
-自定义方法
-闭包
-自定义属性
那么写个列子分析一下各自的好坏。demo地址：http://codepen.io/tianzi77/pen/jPMPeB
html结构：

<div id="content">
            <div id="tabs">
                <ul>
                    <li class="active">天子</li>
                    <li>滑动门</li>
                    <li>javascript</li>
                </ul>
                <span id="state">-</span>
            </div>
            <div id="list">
                <ul class="active">
                    <li>IE6 PNG 解决方案合集</li>
                    <li>firefox下输入框innerHtml问题</li>
                    <li>精品菜单导航，多年精心收集整理上上品菜单</li>
                    <li>60个WEB实用效果集合</li>
                    <li>CSS3动态按钮导航集锦</li>
                    <li>HTML 5的革新：结构之美</li>
                    <li>JavaScript高级程序设计（第2版）</li>
                    <li>w3cfuns-我爱你！~~~</li>
                    <li>高性能网站建设指南</li>
                    <li>罕见的皮具拉链效果博客PSD</li>
                    <li>【基础五】块状元素和内联元素</li>
                    <li>“阳癫疯”的纯css下拉导航原理</li>
                    <li>请问这个排序功能如何实现？</li>
                    <li>分享10个便利的HTML5/CSS3框架</li>
                    <li>白璐ersonal 申请【热血活动】版块版主</li>
                    <li>web前端标准在各浏览器中的差异</li>
                </ul>
                <ul>
                    <li>腾讯面试题</li>
                    <li>近期面试感受</li>
                    <li>腾讯实习生web前端JS开发工程师面试经历</li>
                    <li>阿里巴巴web前端开发面试题</li>
                    <li>网易页面重构面试题</li>
                    <li>网易web前端开发师面试问答的经历</li>
                    <li>2011腾讯前端面试稿</li>
                    <li>Alibaba web前端开发工程师面试奇遇记</li>
                    <li>腾讯实习生网页重构组招聘公开试题（含答案</li>
                    <li>求职记——记录成为面霸的全过程</li>
                    <li>淘宝Web前端开发面试经历</li>
                    <li>百度前端面试题对话记录（内推面试）</li>
                    <li>2015年最新百度前端开发面试经历(一面和二面</li>
                    <li>去TX的事基本黄了，题我发出来了</li>
                    <li>俺们公司的面试题</li>
                </ul>
                <ul>
                    <li>滑动门滑动门滑动门</li>
                    <li>滑动门滑动门滑动门</li>
                    <li>滑动门滑动门滑动门</li>
                    <li>滑动门滑动门滑动门</li>
                    <li>滑动门滑动门滑动门</li>
                    <li>滑动门滑动门滑动门</li>
                    <li>滑动门滑动门滑动门！</li>
                </ul>
            </div>
        </div>

然后写css样式：

        *{
          margin:0; 
          padding:0;
        }
        body{
            font-size:12px;
        }
        #content{
            margin:0 auto; 
            width:600px; 
            border:1px #000 solid;
        }
        #tabs{
            height:30px; 
            background:#000; 
            overflow:hidden; 
            position:relative;
        }
        #tabs #state{
            display:block; 
            top:0; 
            right:0; 
            width:30px; 
            height:30px; 
            font-size:24px; 
            font-weight:700; 
            text-align:center; 
            color:#fff; 
            cursor:pointer; 
            position:absolute;
        }
        #tabs li{
            display:inline; 
            padding:0 8px; 
            line-height:30px; 
            color:#fff; 
            list-style:none; 
            cursor:pointer; 
            float:left;
        }
        #tabs .active{
            color:#000; 
            background:#fff;
        }
        #list{
            padding:10px 0;
        }
        #list ul{
            margin:0 25px; 
            display:none;
        }

        #list ul li{
            height:25px; 
            line-height:25px;
        }
        #list .active{
            display:block;
        }

js部分：
首先加减号伸缩按钮比较简单：

state.onclick = function()
                {
                    var text = this.innerHTML;
                    if(text == "-")
                    {
                        this.innerHTML = "+";
                        list.style.display = "none";
                    }
                    else
                    {
                        this.innerHTML = "-";
                        list.style.display = "block";
                    }
                }

然后就是获取id或者class，由于不用jquery，所以直接定义一个$方法获取。简化代码量。

    var $ = function(ids)
                {
                    return document.getElementById(ids);
                }

                var tabs = $("tabs").getElementsByTagName("li");
                var state = $("state");
                var list = $("list");
                var ul = list.getElementsByTagName("ul");

ul的切换和li的滑动效果有三种方法，一一道来：
//方法一可以不使用闭包 思路比较简单 自定义属性 代码少，经常使用。

for(var i = 0; i < tabs.length; i++)
                {
                    tabs[i].index = i;
                    tabs[i].onmouseover = function()
                    {
                        for(var i = 0; i < tabs.length; i++)
                        {
                            tabs[i].className = ul[i].className = "";
                        }
                        this.className = ul[this.index].className = "active";
                    `

                }

方法二：

function events(index)
                {
                    tabs[index].onmouseover = function()
                    {
                        for(var i = 0; i < tabs.length; i++)
                        {
                            tabs[i].className = ul[i].className = "";
                        }
                        this.className = ul[index].className = "active";
                    }
                }

//方法三 采用闭包立即执行索引

(
                    function(index)
                    {
                        tabs[index].onmouseover = function()
                        {
                            for(var i = 0; i < tabs.length; i++)
                            {
                                tabs[i].className = ul[i].className = "";
                            }
                            this.className = ul[index].className = "active";
                        }
                    }
                )(i);

随便掌握一种便可玩转滑动门。