思想：首先定义三个选项卡，可以用任何标签，只要如下图，

一共有三个ul，第一个ul给一个class，因为默认第一个选项卡的内容显示出来，

其他两个ul  display：none；

当我鼠标移到第二个第三个选项卡的时候，删除第一个选项卡的class，鼠标移到哪里就给哪个选项卡那个class

思路就這样

下面是完全的代码

最好自己写写，然后参考自己下面的代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<style type="text/css">

    *{margin:0;padding:0;}

    body{font-size:12px;}

    #content{margin:0 auto;width:600px;border:1px #000 solid;}

    #tabs{height:30px;background:black;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;}

</style>

</head>

<body>

<script>

window.onload=function()

{

   var $ =function(ids)

      {

          return document.getElementById(ids);

      }

      var tabs= $("tabs").getElementsByTagName("li");

      var state = $("state");

      var list = $("list");

      var ul = list.getElementsByTagName("ul");

   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";

        }

   }

      //方法2

      // for(var i=0;i<tabs.length;i++)

      // {

      //   (

      //      function(index)

      //     {

      //         tabs[index].onmouseover=function()

      //       {

      //           for(var j=0;j<tabs.length;j++)

      //           {

      //               tabs[j].className=ul[j].className='';

      //           }

      //            this.className=ul[index].className="active";

      //       }

      //     }

      //   )(i)  ;

      // }

      //方法1

     // function clearEvent(index)

     //  {

     //      tabs[index].onmouseover=function()

     //    {

     //        for(var j=0;j<tabs.length;j++)

     //        {

     //            tabs[j].className=ul[j].className='';

     //        }

     //         this.className=ul[index].className="active";

     //    }

     //  }

       //加号位置的收缩

      state.onclick = function()

      {

        var text = this.innerHTML;

        if( text == "+")

        {

            this.innerHTML="-";

            list.style.display="block";

        }

        else

        {

            this.innerHTML="+";

            list.style.display="none";

        }

      }

}

</script>

<div id="content">

    <div id="tabs">

        <ul>

            <li class="active">暴给力</li>

            <li>职业指导</li>

            <li>充电区</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高级程序设计</li>

            <li>w3cfuns我爱你</li>

            <li>高性能网站建设指南</li>

            <li>罕见的皮具拉链效果博客</li>

            <li>基础5块状元素的内联元素</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>2001腾讯前端面试稿</li>

            <li>alibaba web前段开发工程师面试奇遇记</li>

            <li>特训实习生网页重构组招聘公开试题</li>

            <li>求职记--记录成为面霸的全过程</li>

            <li>淘宝web前端开发面试经历</li>

            <li>百度前端面试题对话记录</li>

            <li>2011年最新百度前端开发面试经历</li>

            <li>去tx的事基本黄了，题我发出来</li>

            <li>俺们公司的面试题</li>

        </ul>

        <ul>

            <li>厘米IT学院第89期</li>

            <li>厘米IT学院第88期</li>

            <li>厘米IT学院第87期</li>

            <li>厘米IT学院第86期</li>

            <li>厘米IT学院第85期</li>

            <li>厘米IT学院第84期</li>

            <li>厘米IT学院第83期</li>

        </ul>

    </div>

</div>

</body>

</html>

js实现简单的滑动门和tab选项卡的更多相关文章

  1. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  2. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  3. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  4. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  5. js 滑动门的实现

    原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...

  6. js 简单的滑动4

    js 简单的滑动教程(四)   作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...

  7. js 简单的滑动3

    js 简单的滑动教程(三)   作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...

  8. js 简单的滑动2

    js 简单的滑动教程(二)   作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...

  9. js 简单的滑动1

    js 简单的滑动教程(一)   作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...

随机推荐

  1. AngularJS PhoneCat代码分析

    转载自:http://www.tuicool.com/articles/ym6Jfen AngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些 ...

  2. C#使用ConditionalAttribute特性来实现代码调试

    转自:http://www.csharpwin.com/csharpspace/10729r8541.shtml #if/#endif条件编译常用来由同一份源代码生成不同的结果文件,最常见的有debu ...

  3. java-Spring-1

    1.@Autowired 自动寻找合适的类型注入,byType2.@Qualifier("userDAOImpl") 存在多个相同类型时,指定固定的一个bean,和上面1配合使用3 ...

  4. [OpenGL ES 03]3D变换：模型，视图，投影与Viewport

    [OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...

  5. 转-安卓中实现两端对齐，中间fill_parent的方法

    安卓中实现两端对齐,中间fill_parent的方法 Java代码:   <?xml version="1.0″ encoding="utf-8″?> <Line ...

  6. mysql索引之四（索引使用注意规则：索引失效--存在索引但不使用索引）

    但是如果是同样的sql如果在之前能够使用到索引,那么现在使用不到索引,以下几种主要情况: 1. 随着表的增长,where条件出来的数据太多,大于15%,使得索引失效(会导致CBO计算走索引花费大于走全 ...

  7. ios6和ios7禁止屏幕旋转

    ios6和ios7禁止屏幕旋转 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOr ...

  8. sqlserver函数大全

    一旦成功地从表中检索出数据,就需要进一步操纵这些数据,以获得有用或有意义的结果.这些要求包括:执行计算与数学运算.转换数据.解析数值.组合值和聚合一个范围内的值等. 下表给出了T-SQL函数的类别和描 ...

  9. 创建一个spring helloworld

    1.下载所需要的jar包 http://projects.spring.io/spring-framework/ 这里使用了maven方式给出jar <dependencies> < ...

  10. java的新窗体

    1.JFrame窗体 jf.setSize(200, 150);        jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);  ...